html用ul li制作导航条

最新推荐文章于 2024-05-19 09:58:49 发布

棉马咪

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量3.6k

点赞数 4

分类专栏： web前端文章标签： html html5 css

本文链接：https://blog.csdn.net/mianmami/article/details/116051566

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

制作的导航条如图所示：
在这里插入图片描述
当鼠标滑过每个导航的时候，背景会变换颜色。技术点：将超链接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>

棉马咪

关注

4
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
html用ul li制作导航条

制作的导航条如图所示：当鼠标滑过每个导航的时候，背景会变换颜色。技术点：将超链接a标签，转换成block标签，从而设置鼠标滑过时的背景色。代码如下所示：<html > <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{border: 0;margin: 0; padding: 0;} ul li{list-s
复制链接

扫一扫