美文网首页
1号店简单布局

1号店简单布局

作者: 优秀的人A | 来源:发表于2018-11-26 16:51 被阅读17次
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>1号店</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .nav,.c1{
            list-style: none;
        }
        .nav li{
            float: left;
            padding: 10px;
            font-size: 16px;
        }
        .nav a,.box2 a{
            color: #000;
            padding: 7px;
            width: 100%;
            text-align: center;
            text-decoration: none;
        }
        .nav a:hover{
            color: red;
        }
        .head{
                width: 1349px;
                height: 211px;
                background-color:white;
        }
        .head1{
                width: 1349px;
                height: 31px;
                background-color: rgb(244, 244, 244);
                line-height: 30px;
                border-bottom: 1px solid rgb(229, 229, 229)
        }
        .head2{
                width: 1070px;
                height: 180px;
                background-color: skyblue;
                margin: 0 auto;
        }
        .a1{
            width: 300px;
            height: 140px;
            float: left;
            background-color: black;
        }
        .a2{
            width: 650px;
            height: 117px;
            float: right;
            background-color: black;
        }
        .a3{
            width: 1070px;
            height: 38px;
            float: left;
            background-color: white;
        }
        .a4{
            width: 140px;
            height: 40px;
            float: left;
            text-align: center;
            background-color: red;
        }
        .a4 span{
            color: white;
            font-size: 16px;
        }
        .box1{
                width: 1070px;
                height: 30px;
                margin: 0 auto;
        }
        .box2{
                width: 122px;
                height: 30px;
                float: left;
        }
        .box3{
                float: left;
                height: 30px;
                padding-left: 20px;
                width: 250px;
    
        }
        .c1 a{
                text-decoration: none;
        }
        .c1 a li span{
                        height: auto;
                        top: 0;
                        left: 36px;
                        color:#666666;
        }
        .c1 a li span:hover{
                        color: red;
        }
        span{
            padding-left: 3px;
            font-size: 12px;
        }
        .box2 a{
            color: #666666;
        }
        .box2 a:hover{
            color: red;
        }
        em{
            font-style: normal;
            font-size: 12px;
        }
        .body{
            width: 1349px;
            height: 400px;
            background-color: greenyellow;
        }
        .body1{
                margin: 0 auto;
                height: 40px;
                position: relative;
                width: 1070px;
                top: 370px;
                z-index: 100;
                cursor: pointer;
                background-color: #1e389a;
        }
        .foot{
            width: 1070px;
            height: 110px;
            background-color: #bbffaa;
            margin: 0 auto;
            margin-top: 20px;
        }
        .foot2{
            width: 1349px;
            height: 444px;
            margin-top: 20px;
            background-color: white;
        }
        .f1{
            width: 1070px;
            height: 370px;
            margin: 0 auto;
            background-color: red;
        }
        .foot3{
            width: 1070px;
            height: 362px;
            margin: 0 auto;
            margin-top: 20px;
            background-color: #1e389a;
        }
        .foot4{
            width: 1349px;
            height: 2265px;
            background-color: #5c9bf1;
            margin-top: 20px;
        }
        .f2{
            width: 1070px;
            height: 501px;
            margin: 0 auto;
            margin-top: 20px;
            background-color: #6d62da;
        }
    </style>
    </head>
    <body>
    <!-- 头1-->
    <div class="head">
        <div class="head1">
             <div class="box1">
                 <div class="box2">
                     <a href="#">
                         <span>送货地址:&nbsp;</span>
                         <em>上海</em>
                     </a>
                 </div>
                 <div class="box3">
                     <ul class="c1">
                         <a href="#" title="1号金币过期公告" target="_blank">
                             <li>
                                 <span>1号金币过期广告</span>
                             </li>
                         </a>
                     </ul>
                 </div>
             </div>
         </div>
        <div class="head2">
            <div class="a1"></div>
            <div class="a2"></div>
            <div class="a3">
                <div class="a4">
                    <span>全部类目</span>
                </div>
                <ul class="nav">
                    <li><a href="#" title="领金币" target="_blank">领金币</a></li>
                    <li><a href="#" title="领劵中心" target="_blank">领劵中心</a></li>
                    <li><a href="#" title="充值" target="_blank">充值</a></li>
                    <li><a href="#" title="超级单品" target="_blank">超级单品</a></li>
                    <li><a href="#" title="超级品牌" target="_blank">超级品牌</a></li>
                    <li><a href="#" title="超级品类" target="_blank">超级品类</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 体body-->
    <div class="body">
        <div class="body1"></div>
    </div>
    <!-- 底1-->
    <div class="foot"></div>
    <!-- 底2-->
    <div class="foot2">
        <div class="f1"></div>
    </div>
    <!-- 底3-->
    <div class="foot3"></div>
    <!-- 底-->
    <div class="foot4">
        <div class="f2"></div>
    </div>
      </body>
    

    相关文章

      网友评论

          本文标题:1号店简单布局

          本文链接:https://www.haomeiwen.com/subject/kmgbqqtx.html