div定位创建网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居家优品</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#o1{
width: 100%;
background-color: beige;
position: relative;
text-align: center;
}
#o2{
width: 100%;
background-color: beige;
height: 800px;
}
div div{
float: left;
width: 300px;
height: 370px;
position: relative;
margin-top:30px ;
margin-left:100px ;
background-color: white;
}
#o3{
float: left;
width: 300px;
height: 185px;
position: relative;
margin-left:100px ;
margin-top:100px ;
background-color: #000000;
}
#o4{
float: left;
width: 300px;
height: 185px;
position: relative;
margin-left:100px ;
margin-top:100px ;
background-color: white;
}
#o5{
float: left;
width: 300px;
height: 185px;
position: relative;
margin-left:100px ;
margin-top:100px ;
background-color: beige;
}
#m1{
float: left;
width: 270px;
height: 180px;
position: relative;
margin-top:10px ;
margin-left:15px ;
}
#m2{
float: left;
width: 130px;
height: 135px;
position: relative;
margin-top:10px ;
margin-left:15px ;
}
#m3{
float: left;
width: 130px;
height: 135px;
position: relative;
margin-top:10px ;
margin-left:10px ;
}
#m4{
float: left;
width: 270px;
height: 180px;
position: relative;
margin-top:10px ;
margin-left:15px ;
}
#m5{
float: left;
width: 130px;
height: 135px;
position: relative;
margin-top:10px ;
margin-left:15px ;
}
#m6{
float: left;
width: 130px;
height: 135px;
position: relative;
margin-top:10px ;
margin-left:10px ;
}
</style>
</head>
<body>
<div id="o1">
<h1 style="display:inline-block; text-align: center;margin-top: 20px;">————居家优品————</h1>
<br />
<br />
</div>
<div id="o2">
<div>
<a href="http://www.baidu.com"><img style="max-width: 100%;" src="img/aaa.png"/></a>
</div>
<div>
<div id="m1">
<a href="http://www.jd.com"><img style="max-height: 100%;max-width: 100%;" src="img/bbb.png"/></a>
</div>
<div id="m2">
<a href="http://www.jd.com"><img style="max-height: 100%;max-width: 100%;" src="img/ccc.png"/></a>
</div>
<div id="m3">
<a href="http://www.baidu.com"><img style="max-height: 100%;max-width: 100%;" src="img/ddd.png"/></a>
</div>
</div>
<div>
<div id="m4">
<a href="http://www.baidu.com"><img style="max-height: 100%;max-width: 100%;" src="img/111.png"/></a>
</div>
<div id="m5">
<a href="http://www.baidu.com"><img style="max-height: 100%;max-width: 100%;" src="img/222.png"/></a>
</div>
<div id="m6">
<a href="http://www.baidu.com"><img style="max-height: 100%;max-width: 100%;" src="img/333.png"/></a>
</div>
</div>
<div id="o3">
<a href="http://www.jd.com"><img style="max-height: 100%;max-width: 100%;" src="img/444.png"/></a>
</div>
<div id="o4">
<a href="http://www.jd.com"><img style="max-height: 100%;max-width: 100%;" src="img/555.png"/></a>
</div>
<div id="o5">
<a href="http://www.jd.com"><img style="max-height: 100%;max-width: 100%;" src="img/777.png"/></a>
</div>
</div>
</body>
</html>
整个页面的背景由两个div块组成，最后在其中用position：relative定位，根据不同的margin值来确定其他div块的位置，图片为超链接。
image.png
网友评论