当前页面: 开发资料首页 → Javascript 专题 → 一款DIV+CSS导航条效果
一款DIV+CSS导航条效果
摘要: 一款DIV+CSS导航条效果
运行代码框
<textarea class=fm id=code style="WIDTH: 547px; HEIGHT: 174px" rows=12 cols=86> <body>
- 文化频道
- 音乐
- 专题
- 博客
- 尔玛论坛
<input style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code')" type=button value=运行代码> [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文件:
- 文化频道
- 音乐
- 专题
- 博客
- 尔玛论坛
↑返回目录
前一篇: 网页上显示时间的最简单的Javascript代码
后一篇: 打印选择区的文本(带html里规定的格式)