<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第5章 用HTML+CSS实现复杂结构的混合布局</title> <style type="text/css"> body{ margin: 0; padding: 0; } .top{ width: 100%; height: 100px; background: blue; margin: 0 auto; } .middle{ width: 800px; height: 500px; margin: 0 auto; background: #ccc; } .mid_left{ width: 20%; height: 100%; float: left; background: #999999; } .mid_right{ width: 80%; height: 100%; float: right; background: #990000; } .mid_right_left{ width: 66.66%; height: 100%; background: red; float: left; } .mid_right_right{ width: 33.33%; height: 100%; background: blue; float: right; } .foot{ width: 800px; height: 100px; margin: 0 auto; background: #dddddd; } </style> </head> <body> <div class="top">上边</div> <div class="middle"> <div class="mid_left">中左</div> <div class="mid_right"> <div class="mid_right_left">中右_左</div> <div class="mid_right_right">中右_右</div> </div> </div> <div class="foot">底部</div> </body> </html>
