CSS浮动案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title> <style> *{ margin: 0; padding: 0; } .inner{ width: 970px; margin: 0 auto; } .inner .top{ height: 103px; margin-bottom: 10px; } .inner .top .logo{ width: 277px; height: 103px; float: left; background-color: red; } .inner .top .nav{ width: 679px; height: 103px; float: right; } .inner .top .nav .news{ width: 137px; height: 49px; background: greenyellow; margin-bottom: 8px; float: right; } .inner .top .nav .nav_li{ height: 46px; background: #000; background: greenyellow; float: right; width: 100%; } .inner .middle{ height: 435px; margin-bottom: 10px; } .inner .middle .left{ width: 310px; height: 435px; background-color: orange; float: left; } .inner .middle .right{ width: 650px; height: 435px; float: right; } .inner .middle .right .r_top{ height: 401px; margin-bottom: 10px; } .inner .middle .right .r_top .r_top_left{ width: 450px; height: 401px; float: left; } .inner .middle .right .r_top .r_top_left .s_top{ height: 240px; background: blue; margin-bottom: 10px; } .inner .middle .right .r_top .r_top_left .s_center{ height: 110px; background: blue; margin-bottom: 10px; } .inner .middle .right .r_top .r_top_left .s_bottom{ height: 30px; background: blue; } .inner .middle .right .r_top .r_top_right{ width: 190px; height: 401px; background: purple; float: right; } .inner .middle .right .r_bottom{ height: 25px; background: green; } .inner .bottom{ height :35px; background: navy; } </style> </head> <body> <div class="inner"> <!-- <顶部导航> --> <div class="top"> <div class="logo"></div> <div class="nav"> <div class="news"></div> <div class="nav_li"></div> </div> </div> <!-- <中心部分> --> <div class="middle"> <div class="left"></div> <div class="right"> <div class="r_top"> <div class="r_top_left"> <div class="s_top"></div> <div class="s_center"></div> <div class="s_bottom"></div> </div> <div class="r_top_right"></div> </div> <div class="r_bottom"></div> </div> </div> <!-- 底部footer --> <div class="bottom"> </dia> </div> </body> </html>