<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局</title>
<style type="text/css">
body{margin:0;padding:0;}
.top{height:100px;background:#ccc;}
.head{height:100px;width:800px;background: blue;margin:0 auto;}
.main{width:800px;height:400px;margin:0 auto;}
.left{width:200px;height:400px;background: #ccc;float:left;}
.middle{width:300px;height:400px;background:yellow;float:left;}
.right{width:300px;height:400px;float:left;}
.subL{width:30%;height:400px;background:blue;float:left;}
.subR{width:70%;height:400px;background:#ccc;float:left;}
.foot{width:800px;height:100px;margin:0 auto;background:red;}
</style>
</head>
<body>
<div class="top">
<div class="head"></div>
</div>
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right">
<div class="subL"></div>
<div class="subR"></div>
</div>
</div>
<div class="foot"></div>
</body>
</html>
学习了一些简单的布局方法。
(1)%控制的自适应布局
(2)像素px控制的固定宽、高布局
(3)使用position:absolute ;left:0;top:0及margin:上右下左
(4)body{margin:0;padding:0;}清除初始布局
(5)margin:0 auto 居中