美文网首页
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