一款DIV+CSS导航条效果

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

运行代码框

<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="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>

[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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航