css ul li 制作导航条

最新推荐文章于 2024-01-03 19:25:37 发布

dfsafsd32323

最新推荐文章于 2024-01-03 19:25:37 发布

阅读量157

点赞数

原文链接：http://www.cnblogs.com/simpledev/p/3444073.html

版权

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

转载于:https://www.cnblogs.com/simpledev/p/3444073.html