4当前位置:网页制作CSS教程-一款DIV+CSS制作的导航条
4网页制作分类
CSS | HTML
FrontPage | DreamWeaver
JavaScript | ASP
.Net | PHP
JSP | XML
数据库 | PhotoShop
FireWorks | Flash
4本站推荐内容
4最新网页制作
·IE6/7下absolute/re…
·二行代码解决全部网…
·一行代码解决iframe…
·CSS自动限制文本显…
·CSS属性全解析
·很流行的图片分割显…
·常用CSS命名规范
·绿色系网页配色应用…
·CSS使网页背景图片…
·几种常用的新闻列表…
4热门网页制作
·使网页变灰的代码(…
·应用CSS美化网页
·CSS实现文字底部对齐
·一款DIV+CSS制作的…
·CSS隐藏表格超出的…
·CSS使网页背景图片…
·用CSS改变鼠标箭头
·表格边框CSS语法大全
·CSS制作文本或图片…
·几种常用的新闻列表…
4相关网页制作
·DIV+CSS布局的优点
·层叠样式表(CSS)…
·更有效率地编写CSS…
·常用CSS缩写语法总结
·层叠样式表(CSS)…
·CSS实现文字居于div…
·很流行的图片分割显…
·调整CSS类型顺序改…
·CSS图片防盗链
·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使网页图片半透明
本站部分内容收集整理于网络,仅用于学习,不存在商业目的,如有涉及版权等问题请联系站长,本站将在第一时间内进行处理!
Copyright © 2007-2008 Zzsky.Cn  中国站长天空  网站制作维护:可乐猫  QQ:8127544(请注明来意)
设为首页  加入收藏  联系站长  友情链接  闽ICP备08002933号