布局

作者: bda1a329d33d | 来源:发表于2018-11-22 00:03 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>布局</title>
    <style type="text/css">
        *{
            margin: 0;
            height: 0;
        }
    
        .header{
            width: 1520px;
            height: 135px;
            background-color:gold;
            margin: 0 auto;
        }
        .header1{
            width: 1520px;
            height: 30px;
            background-color: black;
    
        }
        .header2{
            width: 1200px;
            height: 105px;
            background-color: skyblue;
            margin: 0px auto;
        }
        .logo{
            width: 310px;
            height: 39px;
            background-color: palevioletred;
            position: absolute;top: 50px;
        }
        .search{
            width: 484px;
            height: 32px;
            background-color: salmon;
            position: absolute;top: 50px;left:590px ;
    
        }
        .shop{
            width: 162px;
            height: 34px;
            background-color: brown;
            position: absolute;top:50px;right: 200px;
        }
        .conter{
            width: 1520px;
            height: 690px;
            background-color: rebeccapurple;
    
        }
        .menu{
            width: 1520px;
            height: 38px;
            background-color: cornflowerblue;
        }
        .lunbotu{
            width: 1520px;
            height: 460px;
            background-color: lightseagreen;
        }
        .lunxia{
            width: 1200px;
            height: 160px;
            background-color: darkblue;
            margin: 15px auto;
        }
        .foot{
            width: 1520px;
            height: 1108px;
            background-color: aqua;
        }
        .daping{
            width: 1520px;
            height: 70px;
            background-color: firebrick;
            padding-top: 30px;
        }
        .size{
            width: 1520px;
            height: 18.48px;
            background-color: white;
        }
        .dianshi{
            width: 1200px;
            height: 969px;
            background-color: darkorange;
            margin: 0 auto;
        }
        .jingpin{
            width: 1520px;
            height: 702.48px;
            background-color: plum;
        }
        .peijian{
            width: 1520px;
            height: 70px;
            background-color: peru;
        }
        .fenlie{
            width: 1520px;
            height: 18.48px;
            background-color: lightpink;
        }
        .dafeilie{
            width: 1200px;
            height: 564px;
            background-color: khaki;
            margin: 0 auto;
        }
    </style>
    </head>、
    <body >
    <div class="header">
        <div class="header1"></div>
        <div class="header2">
            <div class="logo"></div>
            <div class="search"></div>
            <div class="shop"></div>
        </div>
    
    </div>
    <div class="conter">
        <div class="menu"></div>
        <div class="lunbotu"></div>
        <div class="lunxia"></div>
    </div>
    <div class="foot">
        <div class="daping"></div>
        <div class="size"></div>
        <div class="dianshi"></div>
        <div class="jingpin">
            <div class="peijian"></div>
            <div class="fenlie"></div>
            <div class="dafeilie"></div>
        </div>
    
    </div>
    </body>
    

    相关文章

      网友评论

          本文标题:布局

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