Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 第十期Grid重写二手商品交易组件页面（2019-12-28）
Blogger Information
Blog 22
fans 1
comment 0
visits 17700
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第十期Grid重写二手商品交易组件页面（2019-12-28）
齐齐
Original
530 people have browsed it

Grid重写二手商品交易组件页面最终效果

网页dom结构分析和思路

采用flex布局的二手交易html代码，并做了一点细微的调整。将其放入一个三行两列的网格中，根据自己的习惯也可以先分成一个一行两列的网格。这里是分的三行两列，并创建网格区域模板。

在网格容器中，抢好货（title1）合并第一行的2个单元格效果，html代码中div（class=title1）项目通过grid-area：title1让内容放入指定网格区中。热门分类（title2）实现的方式和抢好货（title1）一样。
热门分类下方的商品展示区（goode-list），画出一个两行四列的网格，通过grid-gap设置列和行的间距。
右侧功能快速入口区（quick-entry）是一个四行两列的单元格，第三行和第四行合并同行的单元格。

html代码和css样式

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_second_hand.css">
  6.     <title>公共二手交易区组件</title>
  7. </head>
  8. <body>
  9. <!--导入大标题组件-->
  10. <div class="public-headline">
  11.     <span>二手交易</span>
  12. </div>
  13. <!--二手交易区-->
  14.  <div class="public-second-hand">
  15.      <!--标题一-->
  16.      <div class="title1">
  17.          <a href="">抢好货</a>
  18.          <span>0低价，便捷，安全，快速</span>
  19.      </div>
  20.      <!--标题二-->
  21.      <div class="title2">
  22.          <span>热门分类</span>
  23.          <a href="">美女写真</a>
  24.          <a href="">日本美女</a>
  25.          <a href="">美国美女</a>
  26.          <a href="">国内美女</a>
  27.          <a href="">AV美女</a>
  28.      </div>
  29.         <!-- 商品展示区-->
  30.     <!-- 1.左侧为商品列表 -->
  31.         <div class="goods-list">
  32.             <!--商品简介-->
  33.             <div class="intro">
  34.             <a href="">
  35.                 <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  36.             </a>
  37.             <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  38.             <div>
  39.                 <span>¥333</span>
  40.                 <span>美女</span>
  41.             </div>
  43.         </div>
  44.             <div class="intro">
  45.                 <a href="">
  46.                     <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  47.                 </a>
  48.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  49.                 <div>
  50.                     <span>¥333</span>
  51.                     <span>美女</span>
  52.                 </div>
  54.             </div>
  55.             <div class="intro">
  56.                 <a href="">
  57.                     <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  58.                 </a>
  59.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  60.                 <div>
  61.                     <span>¥333</span>
  62.                     <span>美女</span>
  63.                 </div>
  65.             </div>
  66.             <div class="intro">
  67.                 <a href="">
  68.                     <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  69.                 </a>
  70.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  71.                 <div>
  72.                     <span>¥333</span>
  73.                     <span>美女</span>
  74.                 </div>
  76.             </div>
  77.             <div class="intro">
  78.                 <a href="">
  79.                     <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  80.                 </a>
  81.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  82.                 <div>
  83.                     <span>¥333</span>
  84.                     <span>美女</span>
  85.                 </div>
  87.             </div>
  88.             <div class="intro">
  89.                 <a href="">
  90.                     <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  91.                 </a>
  92.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  93.                 <div>
  94.                     <span>¥333</span>
  95.                     <span>美女</span>
  96.                 </div>
  98.             </div>
  99.             <div class="intro">
  100.                 <a href="">
  101.                     <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  102.                 </a>
  103.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  104.                 <div>
  105.                     <span>¥333</span>
  106.                     <span>美女</span>
  107.                 </div>
  109.             </div>
  110.             <div class="intro">
  111.                 <a href="">
  112.                     <img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120">
  113.                 </a>
  114.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  115.                 <div>
  116.                     <span>¥333</span>
  117.                     <span>美女</span>
  118.                 </div>
  120.             </div>
  121.         </div>
  122.     <!--2.右侧功能快速入口 -->
  123.          <div class="quick-entry">
  124.              <a href=""><img src="../../static/images/ad/1.png" alt=""></a>
  125.              <a href=""><img src="../../static/images/ad/2.png" alt=""></a>
  126.              <a href=""><img src="../../static/images/ad/3.png" alt=""></a>
  127.              <a href=""><img src="../../static/images/ad/4.png" alt=""></a>
  128.              <a href=""><img src="../../static/images/ad/image.png" alt=""></a>
  129.              <a href=""><img src="../../static/images/ad/ad2.jpg" alt=""></a>
  130.          </div>
  131.  </div>
  132. </body>
  133. </html>

css代码

  1. /*导入元素的公共初始化样式表*/
  2. @import "../public_reset.css";
  3. /*大标题组件*/
  4. @import url(../public_headline/public_headline.css);
  5. .public-second-hand{
  6.     width: 1200px;
  7.     padding: 10px;
  8.     box-sizing: border-box;
  9.     margin: auto;
  10.     background: white;
  11.     border-radius: 5px;
  12.     /*将容器转为grid容器*/
  13.     display:grid;
  14.     /*画网格，整体分为三行两列布局*/
  15.     grid-template-columns: 760px 440px;
  16.     grid-template-rows: 50px 55px 440px;
  17.     /*给网格区域命名*/
  18.     grid-template-areas: 'title1 title1'
  19.                          'title2 title2'
  20.                           'goods-list quick-entry';
  21. }
  22. .public-second-hand:hover{
  23.     box-shadow: 0 0 8px #888;
  24. }
  25. .public-second-hand >.title1{
  26.     /*给项目命名*/
  27.     grid-area: title1;
  28.     border-bottom: 1px solid #ccc;
  29. }
  30. .public-second-hand >.title1 > a{
  31.     font-size: 23px;
  32.     margin-right: 20px;
  33. }
  34. .public-second-hand >.title1 > span{
  35.     color:red;
  36. }
  37. .public-second-hand >.title2{
  38.     /*给项目命名*/
  39.     grid-area: title2;
  40. }
  41. .public-second-hand >.title2>span{
  42.     color:red;
  43.     font-size: 23px;
  44. }
  45. .public-second-hand >.title2>a{
  46.     padding-left:20px;;
  47. }
  49. .public-second-hand >.goods-list{
  50.     padding: 10px;
  51.     /*给项目命名*/
  52.     grid-area: goods-list;
  53.     /*转为grid容器*/
  54.     display: grid;
  55.     /*将主体划分为两行四列网格*/
  56.     grid-template-columns: repeat(4,178px);
  57.     grid-template-rows: repeat(2,200px);
  58.     /*行间距15px，列间距10px*/
  59.     grid-gap: 15px 10px;
  60. }
  62. .public-second-hand >.goods-list img{
  63.     border-radius: 5px;
  64.     border: 1px solid #ccc;
  65.     display: block;
  66. }
  67. .public-second-hand >.goods-list a{
  68.     display: block;
  69.     margin-bottom: 13px;}
  70. .public-second-hand >.goods-list img:hover{
  71.     box-shadow: 0 0 8px #ccc;
  72. }
  73. .public-second-hand >.goods-list>.intro>div{
  74.     /*为了不使用float属性，转为flex容器*/
  75.     display: flex;
  76.     justify-content: space-between;
  77. }
  78. .public-second-hand >.goods-list>.intro>div>span:first-of-type{
  79.     color:red;
  80. }
  81. .public-second-hand >.goods-list>.intro>div>span:last-of-type{
  82.     background: #55a532;
  83.     color: white;
  84.     padding: 0 3px;
  85. }
  86. .public-second-hand >.quick-entry{
  87.     padding: 10px;
  88.     /*给项目命名*/
  89.     grid-area: quick-entry;
  90.     /*转为grid容器*/
  91.     display: grid;
  92.     /*将主体划分为四行两列网格*/
  93.     grid-template-columns: repeat(2,190px);
  94.     grid-template-rows: 130px 130px 60px 60px;
  95.     /*行间距12px，列间距25px*/
  96.     grid-gap: 12px 25px;
  97.     /*网格区域命名*/
  98.     grid-template-areas:'img1 img2'
  99.                         'img3 img4'
  100.                         'img5 img5'
  101.                         'img6 img6';
  102. }
  103. .public-second-hand >.quick-entry a img{
  104.     width: 190px;
  105.     height: 130px;
  106. }
  107. .public-second-hand >.quick-entry a:nth-of-type(5){
  108.     grid-area: img5;
  109. }
  110. .public-second-hand >.quick-entry a:last-of-type{
  111.     grid-area: img6;
  112. }
  113. .public-second-hand >.quick-entry a:nth-of-type(5) img,.public-second-hand >.quick-entry a:last-of-type img{
  114.     width: 393px;
  115.     height: 60px;
  116. }

手写grid.md课堂文档

总结

写代码不管是前端还是后端，走出动手的第一步才行。起初一直怕写不出来，躲避不去动手写。当写了后才发现，真的没那么难。结构分析，有了思路，能够更快的写出网站dom结构。

简单的文字链接直接用a标签，纯文本推荐span标签。标签gird布局虽然不错，但是在处理细节部分真赶不上flex布局好用。flex和gird相配合，能够更快的实现效果。需要注意的是，放在同一个网格中的每个项目必须是同级关系才能放进去。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：其实前面的二个title并不适合用grid的, 用flex会更好, 为什么呢? 因为下面的图文应该是从数据表中读出一条记录, 如果把他们封装到一个容器中, 利于写模板数据循环, 而不要把title包括进去
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post