css ul li 制作导航条

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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