css简单练习3
要求：淘宝首页框架布局 参考图片如下
用div与浮动有关知识完成
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css"> *{ margin: 0px; padding: 0rem; } #box1 { width: 1200px; } .box1_left, .box1_center, .box1_right { float: left; height: 800px; } .box1_left { background-color: #00FFFF; width: 300px; } .box1_center { background-color:aliceblue; width: 600px; height: 800px; } .box1_right { background-color: crimson; width: 300px; } .c11 { float: left; background-color: green; height: 360px; width: 260px; margin: 20px 20px; } .c12 { float: left; background-color: yellow; height: 360px; width: 260px; margin: 20px 20px; } .c21 { float: left; background-color: red; height: 360px; width: 180px; margin: 20px 10px; } .c22 { float: left; background-color: lawngreen; height: 360px; width: 180px; margin: 20px 10px; } .c23 { float: left; background-color: salmon; height:360px; width: 180px; margin: 20px 10px; } </style>
</head>
<body>
<div></div>
<div id="box1">
<div class="box1_left">
box1
</div>
<div class="box1_center">
<div>
<div class="c11">左</div>
<div class="c12">右</div>
<div style="clear: left;"></div>
</div>
<div>
<div class="c21">左</div>
<div class="c22">中</div>
<div class="c23">右</div>
<div style="clear: left;"></div>
</div>
</div>
<div class="box1_right">
box3
</div>
<div style="clear: left;"></div>
</div>
</body>
</html>
运行结果：
