To achieve the first, the list of products linked to the mold, the longitudinal link, the DIV nesting directly on the code. .
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<Title> DIV label creating adaptive hybrid arrangement </ title>
<style>
body {margin:0 auto;padding:0;}
#top_logo{
margin:0 auto:
width:100%;
min-width:960px;
line-height:50px;
height:50px;
text-align:center;
background:lightblue;
}
#header{
width:100%;
height:30px;
min-width:960px;
margin:0 auto;
padding:0;
margin-bottom:10px;
background:purple;
}
#header1{
width:960px;
margin:0 auto;
padding:0;
}
#header ul{
list-style:none;
background:purple;
overflow:hidden;
/ * Particularly important, without overflow, ul deviation * /
margin:0 auto;
text-align:center;
}
#header li {
float:left;
/ * * Control lateral /
}
#header li a {
display:block;
color:white;
width:104px;
height:30px;
line-height:30px;
text-decoration:none;
text-align:center;
border-radius:5px;
}
#header li a:hover{
background:red;
color:white;
}
.main{
width:100%;
min-width:960px;
margin:0 auto;
}
.main-left{
float:left;
margin-left:0;
width:35%;
height:850px;
background:yellow;
}
.left-menu{
margin:20px auto;
}
.left-menu ul{
list-style:none;
padding:0;
}
.left-menu ul a{
display:block;
padding:5px 0;
/ * Padding should be used with caution, the parent element has a great vertical and horizontal margin when you can use * /
margin: 5px auto;
width:100%;
color:black;
text-align:center;
text-decoration:none
}
.left-menu ul a:hover{
background:orange;
}
.main-right{
float:right;
margin-left:0;
width:65%;
height:850px;
background:green;
}
.product-list{
width:560px;
margin: 20px auto; / * the upper and lower distillate 20px, left and right Kyochu * /
}
.product{
margin-top:20px;
margin-left:25px;
width:240px;
height:350px;
background:white;
float:left;
}
.product-page{
margin:0 auto;
margin-top:800px;
/ * DIV nesting, using the margin defined position, otherwise it will heap together * /
width:600px;
height:30px;
background:lightblue;
text-align:center
}
</style>
</head>
<body>
<div id='top_logo'>
This is banner picture ╕╖╗╘╙╚ ╛╜╝╞╟╠ ╡╢╣╤ ╥
</div>
<div id='header'>
<div id='header1'>
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">热点</a></li>
<li><a href="#">动态</a></li>
<li><a href="#">直播</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
<Li> <a href="#"> About Us </a> </ li>
</ul>
</div>
</div>
<div class='main'>
<div class='main-left'>
<div class='left-menu'>
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">热点</a></li>
<li><a href="#">动态</a></li>
<li><a href="#">直播</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
<Li> <a href="#"> About Us </a> </ li>
</ul>
</div>
</div>
<div class='main-right'>
<Div class = 'product-list'> <-! Zone size control products, to prevent serial ->
<div class='product'>
1111111111
</div>
<div class='product'>
2222222222
</div>
<div class='product'>
3333333333
</div>
</div>
<div class='product-page'>
pages:1、2、3、4、5、6、7、8
</div>
</div>
</div>
</body>
</html>