网页布局作业
2018-08-15 本文已影响0人
跟我念一遍
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#d1{
float:left;
/*position:absolute;*/
width: 310px;
height: 380px;
background-color: gainsboro;
border:5px solid black;
margin-left: 50px;
margin-top: 100px;
}
#i1{
position:absolute;
float: left;
margin-left: 40px;
bottom: 30px;
}
#d2{
float: left;
position: relative;
width: 400px;
height: 430px;
background-color: white;
margin-left: 70px;
margin-top: 65px;
}
#i2{
margin-left: 20px;
width: 90%;
}
#i3{
float:left;
margin-left: 20px;
margin-top: 10px;
}
#i4{
float:left;
margin-left: 20px;
margin-top: 10px;
}
#d3{
float: left;
position: relative;
width: 400px;
height: 430px;
background-color: white;
margin-left: 20px;
margin-top: 65px;
}
#i5{
margin-left: 20px;
width: 90%;
}
#i6{
float:left;
margin-left: 20px;
margin-top: 10px;
}
#i7{
float:left;
margin-left: 20px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="d" style="width:100%;height: 1000px;background-color: gainsboro">
<p style="text-align:center;font-family: '黑体';font-size: 50px;">————居家优品————</p>
<div id="d1">
<img id="i1" src="img/tu1.jpg" style="width: 310px;height: 390px;"/>
</div>
<div id="d2">
<p style="margin-left:20px;">
<a style="font-size: 30px;font-family: '黑体';float: left;">家电馆</a>
<img src="img/jiantou.png" style="float: left;margin-top: 2px;"/>
<a style="font-size: 20px;font-family: '黑体';color: darkgray;float: left;margin-top: 5px;">家电好物节</a>
</p>
<img id="i2" src="img/tu2.jpg"/>
<img id="i3" src="img/tu3.jpg"/>
<img id="i4" src="img/tu4.jpg"/>
</div>
<div id="d3">
<p style="margin-left:20px;">
<a style="font-size: 30px;font-family: '黑体';float: left;">我爱我家</a>
<img src="img/jiantou.png" style="float: left;margin-top: 2px;"/>
<a style="font-size: 20px;font-family: '黑体';color: darkgray;float: left;margin-top: 5px;">品质生活家</a>
</p>
<img id="i5" src="img/tu5.jpg"/>
<img id="i6" src="img/tu6.jpg"/>
<img id="i7" src="img/tu7.jpg"/>
</div>
</div>
</div>
</body>
</html>
image.png
