html混合布局,HTML混合布局 - 黄柳淞的个人页面 - OSCHINA - 中文开源技术交流社区...

1.html混合布局1

html混合布局

body{margin: 0;padding: 0;}

.top{height: 100px;background-color: #aaa}

.main{width: 800px;height: 600px;background-color: #bbb;margin:0 auto;}

.left{width:200px;height: 600px;background-color: #ddd;float: left;}

.right{width:600px;height: 600px;background-color: #eee;float: right;}

.foot{width: 800px;height: 100px;background-color: #ccc;margin:0 auto;}

效果图

2.混合布局2

html混合布局

body{margin: 0;padding: 0;}

.top{height: 100px;background-color: #aaa}

.main{width: 800px;height: 600px;background-color: #bbb;margin:0 auto;}

.left{width:200px;height: 600px;background-color: #ddd;float: left;}

.right{width:600px;height: 600px;background-color: #eee;float: right;}

.sub_left{width: 200px;height: 600px;background-color: red;float: left;}

.sub_right{width: 400px;height: 600px;background-color: yellow;float: right;}

.foot{width: 800px;height: 100px;background-color: #ccc;margin:0 auto;}

效果图：