DIV+CSS制作另一导航条效果
作者：佚名 文章来源：无忧源码收集整理 点击数： 更新时间：2007-8-15
程序代码
<style>
*{
margin: 0;
padding: 0;
}
#nav{
width: 250px;
font-size: 12px;
background: #f60;
}
#nav ul{
display: block;
list-style-type: none;
}
#nav li{
display: block;
}
#nav li a{
padding: 0 0 0 10px;
width: 200px;
display: block;
color: #666;
text-decoration: none;
}
#nav li a:link,#nav li a:visited{
color: #666;
}
#nav li a:hover{
padding: 0 0 0 8px;
border-left: 2px solid #FF0000;
color: #cccc00;
}
</style>
结构部分：
<div id="nav">
<ul>
<li><a href="http://www.admin5.com">网站首页</a></li>
<li><a href="http://www.admin5.com">站长资讯</a></li>
<li><a href="http://www.admin5.com">网页设计</a></li>
<li><a href="http://www.admin5.com">网站欣赏</a></li>
<li><a href="http://www.admin5.com">站长学习乐园</a></li>
<li><a href="http://www.admin5.com">admin5欢迎您</a></li>
</ul>
</div>
友情提示：全选代码复制运行，您也可以先修改部分代码再运行查看效果 。
<style>
#nav{background:#000; font-size:12px; float:left; margin-left:50px; width:250px; padding:50px;}
#nav div{margin:8px;}
#nav span{display:none; display:block;}
#nav a{color:#666;text-decoration:none; display:block;}
#nav a:hover{color:#FFFF00; position:relative;}
#nav a:hover span{display:block;left:-10px;position:absolute;color:#FFff00;border-top: 12px solid #ffff00;border-left:4px solid #ffff00;line-height:0px;}
</style>
CSS部分：#nav{background:#000; font-size:12px; float:left; margin-left:50px; width:250px; padding:50px;}
#nav div{margin:8px;}
#nav span{display:none; display:block;}
#nav a{color:#666;text-decoration:none; display:block;}
#nav a:hover{color:#FFFF00; position:relative;}
#nav a:hover span{display:block;left:-10px;position:absolute;color:#FFff00;border-top: 12px solid #ffff00;border-left:4px solid #ffff00;line-height:0px;}
</style>
<style>
*{
margin: 0;
padding: 0;
}
#nav{
width: 250px;
font-size: 12px;
background: #f60;
}
#nav ul{
display: block;
list-style-type: none;
}
#nav li{
display: block;
}
#nav li a{
padding: 0 0 0 10px;
width: 200px;
display: block;
color: #666;
text-decoration: none;
}
#nav li a:link,#nav li a:visited{
color: #666;
}
#nav li a:hover{
padding: 0 0 0 8px;
border-left: 2px solid #FF0000;
color: #cccc00;
}
</style>
结构部分：
<div id="nav">
<ul>
<li><a href="http://www.admin5.com">网站首页</a></li>
<li><a href="http://www.admin5.com">站长资讯</a></li>
<li><a href="http://www.admin5.com">网页设计</a></li>
<li><a href="http://www.admin5.com">网站欣赏</a></li>
<li><a href="http://www.admin5.com">站长学习乐园</a></li>
<li><a href="http://www.admin5.com">admin5欢迎您</a></li>
</ul>
</div>
- 上一篇文章： 深入剖析 CSS继承
- 下一篇文章： 没有了
文章评论
只显示最新5条。评论内容只代表网友观点，与本站立场无关！查看完整内容