header{width: 100%;height: 52px;background-color: #333;}
section{ width: 1200px;height: auto;background-color: #123;margin:auto;}
section>.asi1{width: 1200px;height: 175px;margin:10px 0;}
section>.asi1>ul{width: 100%;height: 100%;font-size: 0px;}
section>.asi1>ul>li{width: 384px;height: 155px;background-color: red;display: inline-block;margin:10px 0; }
section>.asi1>ul>li:nth-of-type(2){margin:10px 0 10px 24px;}
section>.asi1>ul>li:nth-of-type(3){float: right;}
section>.asi2{width: 1200px;height: auto;}
section>.asi2>.left{width: 840px;height: 3528px;background-color: #38f;float: left;clear: both;}
.asi2>.left>.m1{width: 100%;height: 637px;background-color: blue;}
.asi2>.left>.m2{width: 100%;height: 1237px;background-color: #564;margin-top:10px;}
section>.asi2>.right{width: 336px;height: 1000px;background-color: #333;float: right;}
section>.asi2>.right>ul{width: 100%;height: auto;}
section>.asi2>.right>ul>li{width: 100%;height: auto;background-color: pink;margin-bottom:20px;}
section>.asi2>.right>ul>li:nth-of-type(1){height:330px;}
section>.asi2>.right>ul>li:nth-of-type(2){height:68px;}
section>.asi2>.right>ul>li:nth-of-type(3){height:1116px;}
section>.asi2>.right>ul>li:nth-of-type(4){height:1000px;}
section>.asi2>.right>ul>li:nth-of-type(5){height:238px;}
section>.asi2>.right>ul>li:nth-of-type(6){height:404px;}
footer{width: 100%;height: 52px;background-color: #333;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页布局</title>
<link rel="stylesheet" href="http://webmf.cn/reset.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<header></header>
<section>
<aside class="asi1">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</aside>
<aside class="asi2">
<div class="left">
<div class="m1"></div>
<div class="m2"></div>
</div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</aside>
</section>
<div style="clear: both;"></div>
<footer></footer>
</body>
</html>
核心知识点：浮动float。
网友评论