Grid布局公共二手交易区组件

布局思路

1.1 整体划为一个四行二列网格：

大标题大标题：第1行全部
标题1 标题1：第2行全部
标题2 标题2：第3行全部
商品展示快速入口：商品展示，第4行，第1列。快速入口，第4行，第2列

1.2 `商品展示`：第4行，第1列，再次划分为两行四列网格

1.3 `快速入口`：第4行，第2列，再次划分为四行两列网格

HTML代码和CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid布局公共二手交易区组件</title>
<!--    初始化样式-->
    <link rel="stylesheet" href="public_reset.css">
<!--    大标题样式-->
    <link rel="stylesheet" href="public_headerline.css">
    <style>
        /*网格布局*/
        body * {
            /*outline: 1px dashed red;*/
        }
        body {
            width: 1200px;
            display: grid;
            /*padding: 10px;*/
            margin: auto;
            box-sizing: border-box;
            /*打格子，四行二列*/
            grid-template-columns: 760px 440px;
            grid-template-rows: 92px 32px 60px 440px;
            /*grid-gap: 5px;*/
        }
        body {
            /*网格区域命名*/
            grid-template-areas:
        'headerline headerline'
        'title1 title1'
        'title2 title2'
        'goods-list quick-entry';
        }
        .public-headerline {
            /*大标题命名*/
            grid-area: headerline;
        }
        .title1 {
             grid-area: title1;
            /*标题1下边线*/
             border-bottom: 1px solid #ccc;
         }
        .title1 > a{
            font-size: 23px;
            margin-right: 20px;
        }
        .title1 > span{
            color:red;
        }
        .title2 {
            grid-area: title2;
        }
        .title2 > span{
            color:red;
            font-size: 23px;
        }
        .title2 > a{
            padding-left:20px;;
        }
       .goods-list {
           grid-area: goods-list;
           display: grid;
           /*再将goods-list划分为两行四列网格*/
           grid-template-columns: repeat(4,178px);
           grid-template-rows: repeat(2,200px);
           /*行间距15px，列间距10px*/
           grid-gap: 15px 10px;
        }
        .goods-list img{
            border-radius: 5px;
            border: 1px solid #ccc;
            display: block;
        }
        .goods-list a{
            display: block;
            margin-bottom: 13px;
        }
        .goods-list img:hover{
            box-shadow: 0 0 8px #ccc;
        }
        .goods-list > .intro > div{
            display: flex;
            /*价格文字两端对齐*/
            justify-content: space-between;
        }
        .goods-list > .intro > div > span:first-of-type{
            color:red;
        }
        .goods-list > .intro > div > span:last-of-type{
            background: #55a532;
            color: white;
            padding: 0 3px;
        }
       .quick-entry {
           grid-area: quick-entry;
           display: grid;
           /*再将quick-entry划分为四行两列网格*/
           grid-template-columns: repeat(2,190px);
           grid-template-rows: 130px 130px 60px 60px;
           /*行间距12px，列间距25px*/
           grid-gap: 12px 25px;
           /*网格区域命名*/
           grid-template-areas:
           'img1 img2'
           'img3 img4'
           'img5 img5'
           'img6 img6';
        }
        .quick-entry a:nth-of-type(5){
            grid-area: img5;
        }
        .quick-entry a:last-of-type{
            grid-area: img6;
        }
    </style>
</head>
<body>
<!--大标题-->
<div class="public-headerline">
    <span>二手交易</span>
</div>
<div class="title1">
    <a href="">抢好货</a>
    <span>0低价，便捷，安全，快速</span>
</div>
<div class="title2">
    <span>热门分类</span>
    <a href="">美女写真</a>
    <a href="">日本美女</a>
    <a href="">美国美女</a>
    <a href="">国内美女</a>
    <a href="">AV美女</a>
</div>
<div class="goods-list">
    <!--            商品简介-->
    <div class="intro">
        <a href=""><img src="../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a>
        <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
        <div>
            <span>&yen; 333</span>
            <span>美女</span>
        </div>
    </div>
    <div class="intro">
        <a href=""><img src="../static/images/shop/shop2.jpg" alt="" width="176" height="120"></a>
        <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
        <div>
            <span>&yen; 333</span>
            <span>美女</span>
        </div>
    </div>
    <div class="intro">
        <a href=""><img src="../static/images/shop/shop3.jpg" alt="" width="176" height="120"></a>
        <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
        <div>
            <span>&yen; 333</span>
            <span>美女</span>
        </div>
    </div>
    <div class="intro">
        <a href=""><img src="../static/images/shop/shop4.jpg" alt="" width="176" height="120"></a>
        <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
        <div>
            <span>&yen; 333</span>
            <span>美女</span>
        </div>
    </div>
    <div class="intro">
        <a href=""><img src="../static/images/shop/shop5.jpg" alt="" width="176" height="120"></a>
        <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
        <div>
            <span>&yen; 333</span>
            <span>美女</span>
        </div>
    </div>
    <div class="intro">
        <a href=""><img src="../static/images/shop/shop6.jpg" alt="" width="176" height="120"></a>
        <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
        <div>
            <span>&yen; 333</span>
            <span>美女</span>
        </div>
    </div>
    <div class="intro">
        <a href=""><img src="../static/images/shop/shop7.jpg" alt="" width="176" height="120"></a>
        <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
        <div>
            <span>&yen; 333</span>
            <span>美女</span>
        </div>
    </div>
    <div class="intro">
        <a href=""><img src="../static/images/shop/shop8.jpg" alt="" width="176" height="120"></a>
        <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
        <div>
            <span>&yen; 333</span>
            <span>美女</span>
        </div>
    </div>
</div>
<div class="quick-entry">
    <a href=""><img src="../static/images/ad/1.png" alt=""></a>
    <a href=""><img src="../static/images/ad/1.png" alt=""></a>
    <a href=""><img src="../static/images/ad/1.png" alt=""></a>
    <a href=""><img src="../static/images/ad/1.png" alt=""></a>
    <a href=""><img src="../static/images/ad/image.png" alt=""></a>
    <a href=""><img src="../static/images/ad/ad2.jpg" alt=""></a>
</div>
</body>
</html>