实现了头，产品列表，模向链接，纵向链接，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>亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
