CSS作业
2018-08-18 本文已影响0人
蘑菇plus
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#total{
margin: auto;
position: relative;
}
#branch1{
position: relative;
height: 400px;
display: block;
}
#branch1 div{
position: relative;
right: 10px;
float: left;
}
#branch1 .content2{
border:5px solid white;
padding: 5px;
padding-left: 10px;
}
#branch1 .content3{
padding-left: 5px;
}
#branch2{
position: relative;
height: 400px;
display: block;
}
#branch2 div{
position: relative;
right: 10px;
float: left;
}
#branch2 .content4{
padding-right:30px ;
}
#branch2 .content5{
border:5px solid white;
padding: 10px;
padding-left: 10px;
}
#branch2 .content6{
padding-left: 10px;
}
</style>
</head>
<body>
<div id="total">
<div id="branch0" style="text-align: center;">
<h2>——居家优品——</h2>
</div>
<div id ="branch1">
<div class="content1">
<img src="img/img1.png"/>
</div>
<div class="content2">
<p style="font-size: 25px; display: inline;">家电馆</p>
<img src="img/img12.png"/>
<p style="font-size: 20px; display: inline;">家电好物节</p>
<img src="img/img2.png" style="display: block;"/>
<img src="img/img3.png"/>
<img src="img/img4.png"/>
</div>
<div class="content3">
<p style="font-size: 25px; display: inline;">我爱我家</p>
<img src="img/img12.png" alt="" />
<p style="font-size: 20px; display: inline;">品质生活家</p>
<img src="img/img5.png" alt="" style="display: block;"/>
<img src="img/img6.png" alt="" />
<img src="img/img7.png" alt="" />
</div>
</div>
<div id="branch2">
<div class="content4">
<img src="img/img8.png" alt=""/>
<p style="font-size: 20px; display: inline;">芝华士旗舰店</p>
<img src="img/img9.png" alt="" style="display: block;"/>
</div>
<div class="content5">
<img src="img/img10.png"/>
</div>
<div class="content6">
<img src="img/img11.png"/>
</div>
</div>
</div>
</body>
</html>
image.png
