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>¥ 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>¥ 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>¥ 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>¥ 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>¥ 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>¥ 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>¥ 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>¥ 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>
效果图
手抄Grid布局基础知识
