html用ul li制作导航条

article/2025/9/18 13:44:47

制作的导航条如图所示：
在这里插入图片描述
当鼠标滑过每个导航的时候，背景会变换颜色。技术点：将超链接a标签，转换成block标签，从而设置鼠标滑过时的背景色。代码如下所示：

<html ><head><meta charset="utf-8"><title></title><style type="text/css">		*{border: 0;margin: 0; padding: 0;}ul li{list-style: none;}.nav{background-color: black; height: 60px;}.nav ul{width:960px; margin:0 auto;overflow: hidden; /*注意因为ul设置为了li设置为了float，为了ul能显示，需要加这句话*//* background-color: gray; */}.nav ul li {float: left;			}.nav ul li a{color:red;text-decoration: none;width: 119px;height: 60px;display: block;line-height: 60px;text-align: center;border-right: 1px white solid;}.nav ul li a:hover{background-color: green;	}.nav ul li a.last{border-right: none;}</style></head><body>	<div class="nav"><ul><li><a href="#">集团介绍</a></li><li><a href="#">集团介绍</a></li><li><a href="#">集团介绍</a></li><li><a href="#">集团介绍</a></li><li><a href="#">集团介绍</a></li><li><a href="#">集团介绍</a></li><li><a href="#">集团介绍</a></li><li><a href="#" class="last">集团介绍</a></li>		</ul>	</div></body>
</html>