前端(布局)

image.png
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>1123</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .head1{
                width: 1153px;
                height: 50px;
                margin: auto;
                background-color: #FF0000;
                /*margin: auto;*/
                
            }
            .head2{
                width: 100%;
                height: 24px;
                background-color: #C0C0C0;
            }
            .head3{
                width: 743px;
                height: 70px;
                margin: 0 auto;
                background-color: #00FF00;
            }
            .head4{
                width: 100%;
                height: 20px;
                background-color: #00FFFF;
            }
            .head5{
                width: 1153px;
                height: 252px;
                margin: auto;
                background-color: #000000;
            }
            .head6{
                width: 743px;
                height: 156px;
                margin: auto;
                background-color: #FF0000;
            }
            .head6-1{
                width: 27px;
                height: 155px;
                background-color: red;
                float: left;
            }
            .head6-2{
                width: 98px;
                height: 155px;
                background-color: red;
                float: left;
            }
            .head6-3{
                width: 109px;
                height: 136px;
                background-color: #FFFFFF;
                float: left;
                margin-right: 13px;
                margin-top: 10px
            }
            .head6-4{
                width: 109px;
                height: 136px;
                background-color: #FFFFFF;
                float: left;
                margin-right: 13.5px;
                margin-top: 10px


            }
            .head6-5{
                width: 109px;
                height: 136px;
                background-color: #FFFFFF;
                float: left;
                margin-right: 13.5px;
                margin-top: 10px
            }
            .head6-6{
                width: 109px;
                height: 136px;
                background-color: #FFFFFF;
                float: left;
                margin-right: 13.5px;
                margin-top: 10px
            }
            .head6-7{
                width: 109px;
                height: 136px;
                background-color: #FFFFFF;
                float:left;
                margin-right: 13.5px;
                margin-top: 10px


            }
            .head7{
                width: 743px;
                height: 53px;
                background-color: #FFFFFF;
                margin: auto;
                line-height:53px;
            }
            
            .head8{
                width: 743px;
                height: 186px;
                background-color: red;
                margin: auto;
            }
            .head8-1{
                width: 140px;
                height: 186px;
                background-color: #C0C0C0;
                float: left;
                margin-right: 10.5px;
            }
            .head8-2{
                width: 140px;
                height: 186px;
                background-color: #C0C0C0;
                float: left;
                margin-right: 10.5px;

            }
            .head8-3{
                width: 140px;
                height: 186px;
                background-color: #C0C0C0;
                float: left;
                margin-right: 10.5px;

            }
            .head8-4{
                width: 140px;
                height: 186px;
                background-color: #C0C0C0;
                float: left;
                margin-right: 10.5px;

            }
            .head8-5{
                width: 140px;
                height: 186px;
                background-color: #C0C0C0;
                float: left;
            }
            
        </style>
    </head>
    <body>
        <div class="head1"></div>
        <div class="head2"></div>
        <div class="head3"></div>
        <div class="head4"></div>
        <div class="head5"></div>
        <div class="head6">
            <div class="head6-1"></div>
            <div class="head6-2"></div>
            <div class="head6-3"></div>
            <div class="head6-4"></div>
            <div class="head6-5"></div>
            <div class="head6-6"></div>
            <div class="head6-7"></div>


        </div>
        <div class="head7">
            <p>明星单品</p>
        </div>
        <div class="head8">
            <div class="head8-1"></div>
            <div class="head8-2"></div>
            <div class="head8-3"></div>
            <div class="head8-4"></div>
            <div class="head8-5"></div>

        </div>
    </body>
</html>    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。