search

博客列表 >使用Grid布局来完成商品列表组件的展示样式--PHP线上培训十期1228

使用Grid布局来完成商品列表组件的展示样式--PHP线上培训十期1228

高的PHP十期培训学习笔记
高的PHP十期培训学习笔记原创
2020年01月03日 11:12:45773浏览

今天我们使用Grid布局的方法重新前面写的商品列表组件案例：

案例：商品列表页

要达到的效果

首先分析出来需要使用Grid布局的地方结构

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>二手商品列表</title>
  6. <!--    <link rel="stylesheet" href="public_second_hand.css">-->
  7.     <link rel="stylesheet" href="public_second_grid.css">
  8. </head>
  9. <body>
  10. <!--标题组件-->
  11. <div class="public-headline">
  12.     <span>二手交易</span>
  13. </div>
  15. <!--交易专区-->
  16. <div class="publi-second-hand">
  17. <!--    抢好货标题-->
  18.     <div class="title1">
  19.         <a href="">抢好货</a>
  20.         <span>0元低价，便捷，安全</span>
  21.     </div>
  22. <!--    分类标题-->
  23.     <div class="title2">
  24.         <span>热门分类</span>
  25. <!--        在光标所在行按CTRL+D可以快速复制当前行-->
  26.         <a href="">美女写真</a>
  27.         <a href="">日本美女</a>
  28.         <a href="">美国美女</a>
  29.         <a href="">国内美女</a>
  30.     </div>
  31. <!--    商品内容区-->
  32.     <div class="goods">
  33. <!--        商品列表-->
  34.         <div class="goods-list">
  35. <!--            单个商品块-->
  36.             <div class="intro">
  37.                 <a href=""><img src="../../../static/images/shop1.jpg" alt="" width="176" height="120"></a>
  38.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  39.                 <div>
  40.                     <span>&yen; 333</span>
  41.                     <span>美女</span>
  42.                 </div>
  43.             </div>
  44.             <!--            单个商品块-->
  45.             <div class="intro">
  46.                 <a href=""><img src="../../../static/images/shop2.jpg" alt="" width="176" height="120"></a>
  47.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  48.                 <div>
  49.                     <span>&yen; 333</span>
  50.                     <span>美女</span>
  51.                 </div>
  52.             </div>
  53.             <!--            单个商品块-->
  54.             <div class="intro">
  55.                 <a href=""><img src="../../../static/images/shop3.jpg" alt="" width="176" height="120"></a>
  56.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  57.                 <div>
  58.                     <span>&yen; 333</span>
  59.                     <span>美女</span>
  60.                 </div>
  61.             </div>
  62.             <!--            单个商品块-->
  63.             <div class="intro">
  64.                 <a href=""><img src="../../../static/images/shop4.jpg" alt="" width="176" height="120"></a>
  65.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  66.                 <div>
  67.                     <span>&yen; 333</span>
  68.                     <span>美女</span>
  69.                 </div>
  70.             </div>
  71.             <!--            单个商品块-->
  72.             <div class="intro">
  73.                 <a href=""><img src="../../../static/images/shop5.jpg" alt="" width="176" height="120"></a>
  74.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  75.                 <div>
  76.                     <span>&yen; 333</span>
  77.                     <span>美女</span>
  78.                 </div>
  79.             </div>
  80.             <!--            单个商品块-->
  81.             <div class="intro">
  82.                 <a href=""><img src="../../../static/images/shop6.jpg" alt="" width="176" height="120"></a>
  83.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  84.                 <div>
  85.                     <span>&yen; 333</span>
  86.                     <span>美女</span>
  87.                 </div>
  88.             </div>
  89.             <!--            单个商品块-->
  90.             <div class="intro">
  91.                 <a href=""><img src="../../../static/images/shop7.jpg" alt="" width="176" height="120"></a>
  92.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  93.                 <div>
  94.                     <span>&yen; 333</span>
  95.                     <span>美女</span>
  96.                 </div>
  97.             </div>
  98.             <!--            单个商品块-->
  99.             <div class="intro">
  100.                 <a href=""><img src="../../../static/images/shop8.jpg" alt="" width="176" height="120"></a>
  101.                 <a href="">美女性感写真海报墙艺术装饰画贴画图1</a>
  102.                 <div>
  103.                     <span>&yen; 333</span>
  104.                     <span>美女</span>
  105.                 </div>
  106.             </div>
  108.         </div>
  109. <!--        右侧图片功能区-->
  110.         <div class="quick-entry">
  111.             <div>
  112.                 <a href=""><img src="../../../static/images/1.png" alt=""></a>
  113.                 <a href=""><img src="../../../static/images/2.png" alt=""></a>
  114.                 <a href=""><img src="../../../static/images/3.png" alt=""></a>
  115.                 <a href=""><img src="../../../static/images/4.png" alt=""></a>
  116.             </div>
  118.             <div>
  119.                 <a href=""><img src="../../../static/images/ad1.png" alt=""></a>
  120.                 <a href=""><img src="../../../static/images/ad2.jpg" alt=""></a>
  121.             </div>
  122.         </div>
  123.     </div>
  124. </div>
  125. </body>
  126. </html>

运行后的效果

添加公共样式表

首先分成一行两列（将商品列表放在左边）

  1. /*商品内容区*/
  2. .publi-second-hand > .goods {
  3.     /*转为GRID*/
  4.     display: grid;
  5.     /*画列*/
  6.     grid-template-columns: 790px 390px;
  7.     /*画行*/
  8.     grid-template-rows: 440px ;
  10. }

将左侧商品使用Grid分成两行四列显示

  1. .publi-second-hand > .goods > .goods-list {
  2.     /*转GRID*/
  3.     display: grid;
  4.     /*画四列两行*/
  5.     /*repeat(4,1fr)属性为重复几次后面的参数*/
  6.     grid-template-columns:repeat(4,1fr);
  7.     grid-template-rows: repeat(2,1fr);
  9. }

使用Grid布局做右侧功能区

  1. /*右侧图片功能区*/
  2. .publi-second-hand > .goods > .quick-entry {
  3.     display: grid;
  4.     /*画三行一列，间距10px*/
  5.     grid-template-columns: 1fr;
  6.     grid-template-rows: repeat(2,1fr);
  7.     grid-row-gap: 10px;
  10. }

最后调整细节样式

  1. /*引入初始化样式表*/
  2. @import "../public_reset.css";
  4. /*引入标题样式*/
  5. @import "../../public/public_headline/public-headline.css";
  8. /*交易专区的样式表*/
  9. .publi-second-hand {
  10.     width: 1200px;
  11.     padding: 10px;
  12.     /*防止盒子撑大*/
  13.     box-sizing: border-box;
  14.     margin: auto;
  15.     /*加圆角*/
  16.     border-radius: 5px;
  17.     background-color: #fff;
  19. }
  21. /*鼠标经过加阴影*/
  22. .publi-second-hand:hover {
  23.     box-shadow: 0 0 8px #888;
  24. }
  26. /*抢好货标题*/
  27. .publi-second-hand > .title1 {
  28.     height: 50px;
  29.     /*一个像素的的底部实线*/
  30.     border-bottom: 1px solid #cccccc;
  31.     box-sizing: border-box;
  32. }
  33. .publi-second-hand > .title1 > a {
  34.     font-size: 23px;
  35.     margin-right: 20px;
  36. }
  37. .publi-second-hand > .title1 > span {
  38.     color: red;
  39. }
  42. /*分类标题*/
  43. .publi-second-hand > .title2 {
  44.     height: 55px;
  45. }
  46. .publi-second-hand > .title2 > span {
  47.     color: red;
  48.     font-size: 23px;
  49. }
  50. .publi-second-hand > .title2 > span ~ a {
  51.     padding-left: 20px;
  52. }
  53. /*鼠标经过分类标题时的颜色变化*/
  54. .publi-second-hand > .title2 > span ~ a:hover {
  55.     color: lightcoral;
  56. }
  60. /*商品内容区*/
  61. .publi-second-hand > .goods {
  62.     /*转为GRID*/
  63.     display: grid;
  64.     /*画列*/
  65.     grid-template-columns: 790px 390px;
  66.     /*画行*/
  67.     grid-template-rows: 440px ;
  69. }
  70. .publi-second-hand > .goods > .goods-list {
  71.     /*转GRID*/
  72.     display: grid;
  73.     /*画四列两行*/
  74.     /*repeat(4,1fr)属性为重复几次后面的参数*/
  75.     grid-template-columns:repeat(4,1fr);
  76.     grid-template-rows: repeat(2,1fr);
  78. }
  79. .publi-second-hand > .goods > .goods-list > .intro{
  80.     width: 176px;
  81.     height: 200px;
  82.     padding: 5px;
  83.     box-sizing: border-box;
  84.     display: grid;
  85.     /*画一列三行*/
  86.     grid-template-columns:1fr;
  87.     grid-template-rows: repeat(3,1fr);
  88.     /*设置行间距*/
  89. grid-row-gap: 5px;
  92. }
  93. .publi-second-hand > .goods > .goods-list > .intro img {
  94.     border: 1px solid #cccccc;
  95.     border-radius: 5px;
  96. }
  97. .publi-second-hand > .goods > .goods-list > .intro > div {
  98. display: grid;
  99.     grid-template-columns: repeat(2,1fr);
  100.     grid-template-rows: 1fr;
  101. }
  102. .publi-second-hand > .goods > .goods-list > .intro span:first-of-type {
  103.     color: red;
  104. }
  105. .publi-second-hand > .goods > .goods-list > .intro > div {
  106.     display: flex;
  107. }
  108. .publi-second-hand > .goods > .goods-list > .intro span:last-of-type {
  109.     color: white;
  110.     background-color: #55ce9f;
  111.     padding: 0 5px;
  112.     margin-left: auto;
  113. }
  115. /*右侧图片功能区*/
  116. .publi-second-hand > .goods > .quick-entry {
  117.     display: grid;
  118.     /*画三行一列，间距10px*/
  119.     grid-template-columns: 1fr;
  120.     grid-template-rows: repeat(2,1fr);
  121.     grid-row-gap: 10px;
  124. }
  125. .publi-second-hand > .goods > .quick-entry > div:first-of-type {
  126.     display: grid;
  127.     /*画两行两列*/
  128.     grid-template-columns:repeat(2,1fr);
  129.     grid-template-rows: repeat(2,1fr);
  130.     grid-gap: 5px;
  132. }
  133. .publi-second-hand > .goods > .quick-entry > div:first-of-type img {
  134.     width: 190px;
  136. }
  137. .publi-second-hand > .goods > .quick-entry > div:last-of-type img {
  138.     width: 390px;
  139.     height: 60px;
  140.     margin-top: 10px;
  141. }

Grid网格布局的知识

上一条：使用Grid布局，仿写二手交易网页下一条：12月25日作业，felx项目上的6个属性与初步了解组件的开发-php培训十期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多