<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拼多多首页导航布局</title>
<style type="text/css">
*{
/* 1.设置通配样式 */
padding: 0;
margin: 0;
}
.box{
/**
* position: fixed固定定位，相对于浏览器的创建进行定位，可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。
* 使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。
*/
position: fixed;
width: 100%;
height: 103px;
border-bottom: 4px solid #ED4358;
background-color: white;
top: 0px;
/*
1.border-style 属性用来设置元素中所有边框的样式
2.solid属性： 定义实线边框
3.border-bottom-style：设置下边框的样式；
border-top-style：设置上边框的样式；
border-left-style：设置左边框的样式；
border-right-style：设置右边框的样式。
*/
}
.div1{
height: 150px;
background-color: darkgrey;
margin-top: 107px;/*到最顶部的距离为107px*/
}
.div2{
height: 150px;
background-color: red;
}
.div3{
height: 150px;
background-color: green;
}
.box .head{
width: 1200px;
height: 105px;
/* background-color: paleturquoise; */
margin: 0 auto;
position: relative;/*相对定位*/
/*1.margin，是CSS语法，这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度，
或者设置各边上外边距的宽度。
2.margin:5px auto;意思上下为5,左右平均居中
*/
}
.box .head img{
width: 180px;
margin: 21px 0;
}
.box .head ul{
/*去掉无序列表里的小圆点*/
list-style: none;
right: 0;
position: absolute;/*绝对定位*/
height: 20px;
top: 50%;
margin-top: -10px;
font-size: 18px;
line-height: 20px;
}
.box .head ul li{
/*float，css的一种属性，主要属性值为：left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动），多用于网页排版。*/
float: left;
border-right: 1px solid #6c6c6c;
}
.box .head ul li span{
color: #6c6c6c;
margin: 0 25px;
}
.box .head ul li a{
text-decoration: none;
}
</style>
</head>
<body>
<div class="box">
<div class="head">
<a href="#">
<img src="../image/pdd_logo_v2.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>
