简单布局
2018-11-21 本文已影响0人
f6d8ee519880
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>迪卡侬官网</title>
<link rel="stylesheet" href="css/迪卡侬官网.css">
</head>
<body>
<div class="header">
<a href="#"><div class="fenlei">
<div class="g">
<span></span>
<span></span>
<span></span>
</div>
分类
</div></a>
<div class="logo"><img src="img/decathlon-logo-chine.svg" width="211" height="30"></div>
<ul class="nav">
<li><a href="#">购物车</a></li>
<li><a href="#">账户</a></li>
<li><a href="#">门店</a></li>
<li><a href="#">帮助</a></li>
</ul>
<div class="shuru">
<input type="text">
</div>
</div>
<div class="header1">
<img src="img/1_002.jpg" width="1519px" height="590px">
<div class="body">
<div class="body1">
<img src="img/22.jpg">
</div>
<div class="body2">
<img src="img/11.jpg">
</div>
<div class="bd">
<div class="bd1">
<img src="img/33.jpg">
</div>
<div class="bd2">
<img src="img/44.jpg">
</div>
<div class="bd3">
<img src="img/55.jpg">
</div>
<div class="bd4">
<img src="img/66.jpg">
</div>
</div>
<div>
<img src="img/2018-11-22T07-47-39.868Z.png" width="1200px" height="182px">
</div>
<div class="box">
<div class="tupian">
<img src="img/1.jpg">
<img src="img/1.jpg">
<img src="img/1.jpg">
<img src="img/1.jpg">
<img src="img/1.jpg">
<img src="img/1.jpg">
</div>
<div class="tupian">
<img src="img/1.jpg">
<img src="img/1.jpg">
<img src="img/1.jpg">
<img src="img/1.jpg">
<img src="img/1.jpg">
<img src="img/1.jpg">
</div>
<div class="tupian">
<img src="img/1.jpg">
<img src="img/1.jpg">
<img src="img/1.jpg">
<img src="img/1.jpg">
<img src="img/1.jpg">
<img src="img/1.jpg">
</div>
</div>
</div>
<div>
<img src="img/canvas.png">
</div>
</div>
</body>
</html>
css
*{
padding:0;
margin:0;
}
.header{
width:1519px;
height:54px;
background-color:#ffffff;
}
.fenlei{
width:55px;
height:54px;
float:left;
display:flex;
align-items: center;
text-decoration: none;
line-height:0;
padding:0 30px 0 20px;
text-transform: uppercase;
font-size:12px;
font-weight:700;
position:relative;
z-index: 0;
overflow: hidden;
border-right:none;
}
.fenlei::before{
width:100%;
z-index:-1;
background-color:#e1edf7;
border-left:1px solid blue;
transform:skewX(10deg) translateZ(0);
transform-origin:0 100%;
}
.fenlei::after,.fenlei::before{
height:100%;
content:"";
left:0;
position:absolute;
top:0;
}
.g{
display:flex;
flex-direction: column;
height:12px;
justify-content:space-between;
margin-right: 10px;
width:17px;
}
/*.g::before{
height:100%;
content:"";
left:0;
position:absolute;
top:0;
}*/
.g span{
height:2px;
background-color:#000000;
border-radius: 99em;
display:inline-block;
margin-top:2px;
}
.fl{
font-size:13px;
margin-left:20px;
line-height:50px;
}
.logo{
float:left;
margin-top:12px;
margin-left:10px;
overflow: hidden;
}
.nav{
width:350px;
height:100%;
float:right;
list-style: none;
}
.nav li{
float: right;
width:25%;
}
.nav a {
color:#b0bbd6;
text-decoration: none;
text-align: center;
display:block;
padding:15px;
}
.nav a:hover{
background-color:#e1edf7;
}
input{
width:800px;
height:40px;
margin:7px 15px auto;
}
input:focus{
background-color:#e1edf7;
width:800px;
}
.header1{
width:1519px;
height:2500px;
background-color:#fff;
}
.body {
width: 1170px;
height: 231px;
background-color: #ffffff;
margin:0 auto;
padding-top:20px;
}
.body1{
width: 580px;
height: 231px;
background-color: #f0ad4e;
float: right;
}
.body2{
width: 580px;
height: 231px;
background-color: #00ffff;
}
.bd{
width:1170px;
height:454px;
background-color:white;
margin-top:20px;
margin-bottom:20px;
}
.bd1{
width:273px;
height:454px;
background-color:greenyellow;
float: right;
margin-left:26px;
}
.bd2{
width:273px;
height:454px;
background-color:firebrick;
float: right;
margin-left:26px;
}
.bd3{
width:273px;
height:454px;
background-color:green;
float: right;
margin-left:26px;
}
.bd4{
width:273px;
height:454px;
background-color:yellow;
}
.box{
width:1100px;
height:770px;
background-color:white;
margin:0 auto;
}
.tupian{
float:right;
margin-top:10px;
}
