您的位置：首页 > Web前端 > CSS

css ul li 制作导航条

2013-11-26 20:39 483 查看 
<html>
<head>
<style>
.test ul{list-style:none;}
.test li{float:left; width:100px;background:#ccc;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url(aa.jpg) #ccc no-repeat 5px 12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#fff;font-weight:bold;text-decoration:none;backgroound:url(aa.jpg) #f00 no-repeat 5px 12px;}
</style>
</head>
<body>
<div class="test">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>

</div>

</body>
</html>


重点是: li {float:left;} //左边浮动, 按横向显示.
ul{list-style:none;} //去掉默认的圆点符号样式

.st_tree ul, .st_tree li{ float:none;} //去掉浮动,按列显示.

.st_left ul, .st_left li{ text-align:left;}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航