實現了頭，產品列表，模向鏈接，縱向鏈接，DIV嵌套，直接上代碼。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV標籤製作自適應混合佈局</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;
/* 特別重要，不加overflow，ul跑偏*/
margin:0 auto;
text-align:center;
}
#header li {
float:left;
/*控制橫向*/
}
#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要謹慎使用，父元素縱橫有很大餘量的時候可以用*/
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; /*上下留出20px，左右居中*/
}
.product{
margin-top:20px;
margin-left:25px;
width:240px;
height:350px;
background:white;
float:left;
}
.product-page{
margin:0 auto;
margin-top:800px;
/*DIV嵌套，使用margin定義位置，否則會堆在一起*/
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="#">關於我們</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="#">關於我們</a></li>
</ul>
</div>
</div>
<div class='main-right'>
<div class='product-list'> <!--控制產品區大小，防止串行-->
<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>