代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>当当网图书_小说传记_青春文学_成功励志_投资理财_各品类图书畅销榜</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .head1{
            width: 1349px;
            height: 35px;
            background-color: red;
        }
        .head2{
            width: 1349px;
            height: 100px;
            background-color: yellow;
        }
        .shop_class{
            width: 1349px;
            height: 43px;
            background-color: green;
        }
        .rank{
            width: 1349px;
            height: 31px;
            background-color: blue;
        }
        .bd{
            width: 1349px;
            height: 5084px;
            background-color: pink;
            /*与上面块的间距*/
            margin-top: 15px;
        }
        .dibu{
            width: 1349px;
            height: 420px;
            background-color: orange;
            margin-top: 15px;
        }
        .last{
            width: 1349px;
            height: 79px;
            background-color: yellowgreen;
            border-bottom: 1px solid rgb(255,255,255);
            border-top: 1px solid red;
        }
        .dibu_nav{
            width: 1349px;
            height: 169px;
            background-color: rgb(102,217,139);
        }
        .dibu_hotci{
            width: 1349px;
            height: 37px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="head1"></div>
    <div class="head2"></div>
    <div class="shop_class"></div>
    <div class="rank"></div>
    <div class="bd"></div>
    <div class="dibu">
        <div class="last"></div>
        <div class="dibu_nav">
            <div class="dibu_hotci"></div>
        </div>
    </div>

</body>
</html>

效果

QQ截图20180810111939.png

QQ截图20180810112044.png