HTML/CSS学习：做一个简易导航栏

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

weixin_44150123

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

阅读量560

点赞数 1

分类专栏：学习文章标签： html

本文链接：https://blog.csdn.net/weixin_44150123/article/details/105801221

版权

学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

注意点：
防止高度塌陷
注意父子元素之间的继承关系（a与li的width属性）
注意行内元素与块级元素（给a设置一个block）
下面展示一些 内联代码片。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航条</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.nav{
			list-style-type: none;
			background-color: #ccc;
			width: 62.5rem;
			margin: 3.125rem auto;/* auto可以设置为居中 */
			overflow: hidden;
		}
		.nav li{
			float: left;
			width: 25%;
			
		}
		.nav a{
			display: block;/* 行内元素无法设置width */
			width: 100%;/* 继承li的width,所以需要先给li设置 */
			text-align: center;
			padding: 5px 0;
			text-decoration: none;
			color:white;
			font-weight: bold;
		}
		.nav a:hover{
			background-color: brown;
		}
		
	</style>
	<body>
		<ul class="nav">
			<li><a href="#">首页</a></li>
			<li><a href="#">新闻</a></li>
			<li><a href="#">联系</a></li>
			<li><a href="#">关于</a></li>
		</ul>
	</body>
</html>