css簡單練習3
要求：淘寶首頁框架佈局 參考圖片以下
用div與浮動有關知識完成
css
代碼實現：
<!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>
運行結果：