<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.screen{
height: 600px;
background-color: azure;
}
.bolck1{
height: 100px;
background-color: ;
}
.a1{
margin-left: 200px;
width: 0px;
}
.a2{
width: 0px;
}
.p1{
margin-top: 20px;
font-size: 30px;
text-align: center;
}
.block2{
width: 250px;
height: 300px;
background-color: azure;
border: 5px solid black;
/*margin: 100px 20px 0 20px;*/
margin-top: 30px;
margin-left: 20px;
margin-right: 20px;
}
.screen2{
float: left;
width: 280px;
/*height: 320px;*/
background-color: azure;
}
.picture1{
position: absolute;
top: 100px;
left: 50px;
}
.screen3{
float: left;
width: 350px;
height: 350px;
background-color: white;
border: 5px solid white;
margin-left: 40px;
}
.picture2{
float: right;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
.font1{
font-size: 20px;
}
.screen4{
float: left;
width: 300px;
height: 350px;
background-color: white;
border: 5px solid white;
margin-left: 20px;
}
.elect{
text-align: center;
}
</style>
</head>
<body>
<div class="screen">
<!--第一块-->
<div class="bolck1">
<hr class="a1"/>
<p class="p1"> 居家优品 </p>
<hr class="a2"/>
</div>
<!--第二块-->
<div class="screen2">
<div class="block2">
<!--<div class="picture1">-->
</div>
<div class="picture1"> <img src="img/22.jpg"/></div>
</div>
<!--第三块 -->
<div class="screen3">
<span class="font1">家电馆</span>
<img src="img/90.jpg"/>
<span>家店好物节</span>
<div class="elect">
<div >
<img src="img/55.jpg"/>
</div>
<div id="">
<img src="img/77.jpg"/>
<img src="img/88.jpg"/>
</div>
</div>
</div>
<!--第四块-->
<div class="screen4">
<span class="font1">我爱我家</span>
<img src="img/90.jpg"/>
<span>品质生活家</span>
<div class="elect">
<div id="">
<img src="img/zz.jpg"/>
</div>
<div id="">
<img src="img/231.jpg"/>
<img src="img/454.jpg "/>
</div>
</div>
</div>
</div>
</body>
</html>
粗糙版
1.jpg
