<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2021-11-6</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.div1{
position: fixed;
height: 40px;
width: 100%;
background-color: blue;
border: 1px solid lawngreen;
}
.div2{
height: 225px;
background-color: black;
}
.div3{
height: 50px;
background-color: #7CFC00;
}
.div4{
width:1000px;
height: 50px;
margin: 0 auto;
font: 17px/50px "微软雅黑";
text-align-last: justify;
}
a{
color: white;
text-decoration: none;
padding: 0 10px;
display: inline-block;
}
a:first-child{
background-color: red;
}
a:hover{
background-color: red;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3">
<div class="div4">
<a href="#">首页1</a>
<a href="#">首页2</a>
<a href="#">首页3</a>
<a href="#">首页4</a>
<a href="#">首页5</a>
<a href="#">首页6</a>
<a href="#">首页7</a>
</div>
</div>
</body>
</html>
效果图：
