<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏小实例</title>
<style>
*{
/*通用选择器设置外边距*/
margin:0;
}
.header{
background-color:pink;
height:50px;
}
.header ul{
height:100%;
/*默认和父元素是一样的高度*/
}
.header li{
height:100%;
list-style:none;
/*作用是去掉li标签前的小圆点*/
display:inline-block;
/*作用是将在多行的层级元素设置为块级元素，保持在一行*/
}
.header li a{
color:white;
text-decoration:none;
/*去掉下划线*/
display:inline-block;
padding:15px;
height:20px;
line-height:20px;
}
</style>
</head>
<body>
<div>
<header class="header">
<nav>
<ul>
<li>
<a href="">课程</a>
</li>
<li>
<a href="">刷题</a>
</li>
<li>
<a href="">个人中心</a>
</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
