一款DIV+CSS制作的导航条

4网页制作分类
CSS	\|	HTML
FrontPage	\|	DreamWeaver
JavaScript	\|	ASP
.Net	\|	PHP
JSP	\|	XML
数据库	\|	PhotoShop
FireWorks	\|	Flash
视频	\|	其它

4赞助商链接

4最新网页制作

·《十天学会web标准(div+css)》之第二天
·《十天学会web标准(div+css)》之第一天
·CSS边框虚线实例
·CSS 3的border-image作用详解
·CSS挂马知识及其防范方法
·利用CSS的@font-face属性在网页中嵌入字体
·DIV+CSS布局和Web标准对网站优化和SEO的好处
·IE6绝对定位的bug及其解决办法
·CSS滤镜详解
·常用的CSS命名规则和注意事项

4热门网页制作

·使网页变灰的代码（包括FLASH等所有网页元素）
·应用CSS美化网页
·CSS实现文字底部对齐
·一款DIV+CSS制作的导航条
·CSS隐藏表格超出的内容
·CSS使网页背景图片居中的三种方法
·用CSS改变鼠标箭头
·表格边框CSS语法大全
·CSS制作文本或图片闪烁效果
·几种常用的新闻列表样式

4相关网页制作

·CSS制作文本或图片闪烁效果
·CSS实现滑动门菜单效果
·CSS制作滑动门的技术总结
·CSS十个注意事项
·我的CSS Hack观点
·解决pre标签里文本无法自动换行的方法
·CSS使网页背景图片居中的三种方法
·303个鼠标指针以及正确的使用方法
·CSS模拟Title和Alt的提示效果
·CSS实现滑动门菜单效果

一款DIV+CSS制作的导航条

类别：CSS教程来源：网络时间：2006-5-3 贴士：推荐给好友

收藏本页 8

完整的代码如下：

<html>
<head>
<title>一款DIV+CSS制作的导航条</title>
<meta http-equiv=content-Type content="text/html;charset=gb2312">
</head>
<style>
/*频道链接样式*/
.channel { width:350px; margin:12px 0px 0px 175px; height:30px; line-height:30px; text-align:center; }
.channel ul { list-style:none; margin:0px;}
.channel li { float:left; padding-left:8px; }
.channel a { background:url(http://www2.zzsky.cn/education/images/20065404247.gif) no-repeat left; padding-left:10px; color:#457a8b; font-size:14px; font-weight:bold; }
.channel a:link { background:url(http://www2.zzsky.cn/education/images/20065404247.gif) no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:visited { background:url(http://www2.zzsky.cn/education/images/20065404247.gif) no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:hover { background:url(http://www2.zzsky.cn/education/images/20065404202.gif) no-repeat left; padding-left:10px; color:#78b4c7; }
.channel a:active { background:url(http://www2.zzsky.cn/education/images/20065404202.gif) no-repeat left; padding-left:10px; color:#78b4c7; }
</style>
</head>
<body>
<div class="channel">
<UL>
<LI><A title=文化频道 href="http://www.rr1mea.cn/culture">文化频道</A></LI>
<LI><A title=音乐频道 href="http://www.q1iangzu.com/music">音乐</A></LI>
<LI><A title=专题 href="http://www.rrme1a.cn/topic">专题</A></LI>
<LI><A title=博客 href="http://www.qian1gzu.com/bbs/bokeindex.asp">博客</A></LI>
<LI><A title=尔玛论坛 href="http://www.qian1gzu.com/bbs/index.asp">尔玛论坛</A></LI></UL></div>
</body>
</html>

·上一篇：用CSS改变鼠标箭头

·下一篇：CSS使网页图片半透明