*{
margin: 0;
padding: 0s;
}
.box{
position: fixed;
top: 0;
width: 100%;
height: 103px;
background-color: white;
border-bottom: 4px solid red;
}
.div1{
height: 150px;
background-color: blue;
margin-top: 107px;
}
.div2{
height: 150px;
background-color: yellow;
}
.div3{
height: 150px;
background-color: black;
}
.box .head{
width: 1200px;
height: 105px;
/* background-color: #ff0e3a; */
margin: 0 auto;
position: relative;
}
.box .head img{
width: 180px;
margin: 21px 0;
}
.box .head ul{
list-style: none;
right: 20px;
height: 20px;
line-height: 20px;
top: 50%;
margin-top: -10px;
font-size: 18px;
position: absolute;
}
.box .head ul li{
float: left;
border-right:1px solid #6C6C6C;
}
.box .head ul li span{
color: #6C6C6C;
margin: 0 28px;
}
.box .head ul li a{
text-decoration: none;
}
.box .head ul li:first-child span{
margin-left: 0;
color: #FC475D;
font-weight: 600;
}
.box .head ul li:last-child{
border:1px none;
}
.box .head ul li:last-child span{
margin-right: 0;
}
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDD</title>
<link rel="stylesheet" href="../Css/003PDD.css">
</head>
<body>
<div class="box">
<div class="head">
<a href="#">
<img src="../img/ppd001.png" >
</a>
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>商家入驻</span></a></li>
<li><a href="#"><span>热点资讯</span></a></li>
<li><a href="#"><span>社会招聘</span></a></li>
<li><a href="#"><span>校园招聘</span></a></li>
<li><a href="#"><span>帮助中心</span></a></li>
<li><a href="#"><span>举报平台</span></a></li>
<li><a href="#"><span>分享赚钱</span></a></li>
</ul>
</div>
</div>
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
</body>
</html>
运行结果：
