目标:
- html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style5.css">
</head>
<body>
<nav>
<div class="nav-item">
<a href="#">HTML/CSS</a>
</div>
<div class="nav-item">
<a href="#">Browser Side</a>
</div>
<div class="nav-item">
<a href="#">Server Side</a>
</div>
<div class="nav-item">
<a href="#">Programming</a>
</div>
<div class="nav-item">
<a href="#">XML</a>
</div>
<div class="nav-item">
<a href="#">Web Building</a>
</div>
<div class="nav-item">
<a href="#">Reference</a>
</div>
</nav>
</body>
</html>
- css代码:
*{
margin: 0;
padding:0;
}
nav{
width: 1210px;
height: 50px;
background-color: #E8E7E3;
margin:10px auto;
}
.nav-item{
line-height: 50px;
float: left;
}
.nav-item a{
display: block;
color: #777777;
text-decoration: none;
text-align: center;
font-weight: bold;
padding: 0 42px;
background-color:rgb(63, 63, 63);
}
.nav-item:last-child a{
padding: 0 44px 0 43.1px;
}
.nav-item a:hover{
background-color: #3F3F3F;
color: #E8E7E3;
}
- 最终效果