一款DIV+CSS导航条效果-luckfly-ChinaUnix博客

运行代码框
<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(/articleimg/2006/04/3385/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; font-size:14px; font-weight:bold; } .channel a:link { background:url(/articleimg/2006/04/3385/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; } .channel a:visited { background:url(/articleimg/2006/04/3385/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; } .channel a:hover { background:url(/articleimg/2006/04/3385/arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; } .channel a:active { background:url(/articleimg/2006/04/3385/arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; } </style> <body> <div class="channel"> <UL> <LI><A title=文化频道 href="">文化频道</A></LI> <LI><A title=音乐频道 href="">音乐</A></LI> <LI><A title=专题 href="">专题</A></LI> <LI><A title=博客 href="">博客</A></LI> <LI><A title=尔玛论坛 href="">尔玛论坛</A></LI></UL></div> <script type="text/javascript" src="/js/jquery.qqFace.js"></script> </body>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

CSS文件:

/*频道链接样式*/
.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() no-repeat left; padding-left:10px; color:#457a8b; font-size:14px; font-weight:bold; }
.channel a:link { background:url() no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:visited { background:url() no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:hover { background:url() no-repeat left; padding-left:10px; color:#78b4c7; }
.channel a:active { background:url() no-repeat left; padding-left:10px; color:#78b4c7; }

图片文件下载:

DIV文件:

文化频道

音乐

专题

博客

尔玛论坛