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>

 

 

 

posted @ 2021-04-06 17:41  hapuluosi  阅读(146)  评论(0)    收藏  举报