027.拼多多⾸页导航布局
<!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>
iphone以旧换新活动</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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论