div+css模拟京东导航

最新推荐文章于 2022-07-01 20:37:19 发布

ygqwan

最新推荐文章于 2022-07-01 20:37:19 发布

阅读量1.8k

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/ygqwan/article/details/17398437

版权

WEB 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>
			测试导航
		</title>
		<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		#menu{
		}
		#menu li{
			float: left;
			list-style: none;
		}
		#menu li a{
			text-decoration: none;
			font-size: 15px;
			font-weight: 700;
			color: white;
			display: block;
			height: 40px;
			line-height: 40px;
			background: #E43c3e;
			padding-left:15px;
			padding-right:15px;
			text-align: center;
		}
		#menu li a:hover{
			background-color:A40000;
		}
		</style>
	</head>
	<body>
		<ul id="menu">
			<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>

		</ul>

	</body>

</html>

注意如下几点：

1. 在li中float，因为是li浮动的

2.将li中的a标签变成块状并设定高度，里面字的高度等于a标签的高度

3. 虽然a会继承来自li中设定的属性，但是部分属性无法继承，所以最好的方式是完全自定义a的属性

ygqwan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div+css模拟京东导航

测试导航 *{ padding: 0px; margin: 0px; } #menu{ } #menu li{ float: left; list-style: none; } #menu li a{ text-decoration: none; font-size: 15px; font-weight: 700;
复制链接

扫一扫

专栏目录