一款DIV CSS导航条效果

2008-02-23 07:59:08来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

运行代码框

[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(http://www.rrmea.cn/skin/Blue/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; font-size:14px; font-weight:bold; }
.channel a:link { background:url(http://www.rrmea.cn/skin/Blue/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:visited { background:url(http://www.rrmea.cn/skin/Blue/arrow2.gif) no-repeat left; padding-left:10px; color:#457a8b; }
.channel a:hover { background:url(http://www.rrmea.cn/skin/Blue/arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }
.channel a:active { background:url(http://www.rrmea.cn/skin/Blue/arrow1.gif) no-repeat left; padding-left:10px; color:#78b4c7; }

图片文件下载:

arrow1.gif
arrow2.gif

DIV文件:

<div class="channel">
<UL>
<LI><A title=文化频道 href="http://www.rrmea.cn/Culture">文化频道</A></LI>
<LI><A title=音乐频道 href="http://www.qiangzu.com/music">音乐</A></LI>
<LI><A title=专题 href="http://www.rrmea.cn/Topic">专题</A></LI>
<LI><A title=博客 href="http://www.qiangzu.com/bbs/bokeindex.asp">博客</A></LI>
<LI><A title=尔玛论坛 href="http://www.qiangzu.com/bbs/index.asp">尔玛论坛</A></LI></UL></div>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:打印选择区的文本(带html里规定的格式)

下一篇:网页上显示时间的最简单的Javascript代码