<div class="main-left">左列</div>
</div>
<div id="footer">页脚</div>
</body>
</html>
4、混合布局的应用
混合布局在网站中应用比较广泛，再复杂的布局结构，他们的原理都是相通的，可以举一反三。网页布局就是依据内容、功能的不同，使用 CSS 对元素进行格式设置，根据版面的布局结构进行排列，那么布局也就是元素与元素之间的关系，或者向一边看齐，或者精准定位，或者有一定间距，或者嵌套，或者相互堆叠，使元素按照设计稿的样式漂亮的呈现在网页上。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>混合布局</title>
<style>
*{margin:0;padding:0;}
#header{
height:30px;
background:blue;
margin-bottom:10px;
}
#nav{
width:960px;
margin:0 auto;
margin-bottom:10px;
}
#main{
width:960px;
height:800px;
margin:0 auto;
overflow:hidden;
}
#main .left{
width:200px;
height:800px;
background:lightgreen;
float:left;
}
#main .right{
width:750px;
height:800px;
float:right;
}
#main .right .sup{
height:200px;
margin-bottom:10px;
}
#main .right .sup-left{
width:370px;
height:200px;
background:pink;
float:left;
}
#main .right .sup-right{
width:370px;
height:200px;
