2021-02-17
作者:互联网
css练习2
w3school导航条
效果截图
代码部分
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>w3导航条</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
width: 1210px;
height: 48px;
background-color: rgba(232, 231, 227, 1);
margin: 50px auto;
}
li{
list-style: none;
/* 设置为向左浮动布局,使导航条横向排列 */
float: left;
/* 文本垂直居中 */
line-height: 48px;
}
li a{
text-decoration: none;
font-size: 18px;
color: #777;
/* 将a设置为块元素 */
display: block;
padding: 0 39px;
}
li a:hover{
background-color: #3F3F3F;
color: #E8E7E3;
}
li:last-child a{
padding: 0 42px 0 41px;
}
</style>
</head>
<body>
<div class="nav">
<li>
<a href="">HTML/CSS</a>
</li>
<li>
<a href="">Browser Side</a>
</li>
<li>
<a href="">Server Side</a>
</li>
<li>
<a href="">Programming</a>
</li>
<li>
<a href="">XML</a>
</li>
<li>
<a href="">Web Building</a>
</li>
<li>
<a href="">Reference</a>
</li>
</div>
</body>
</html>
标签:02,17,color,li,padding,48px,2021,导航条,height 来源: https://blog.csdn.net/weixin_46840701/article/details/113833929