search

博客列表 >Gird网格布局实现商品列表页--PHP培训十期线上班

Gird网格布局实现商品列表页--PHP培训十期线上班

宋明杰
宋明杰原创
2019年12月29日 11:15:14698浏览

Gird网格布局实现商品列表页

初步接触Grid,对他的属性和参数很不熟练，东拉西扯，东拼西凑，总算完成了表面工作，但代码惨不忍睹，特别是CSS部分，

对GRID容器和属性的边框—内外边距，还没掌握怎样设置

HTML代码

  1. <body>
  2.     <div class="essp">
  3.         <div class="essp-bt">
  4.             <span>二手商品</span>
  5.         </div>
  6.         <div class="essp-xq">
  7.             <div class="essp-xq1">
  8.                 <a href="#">抢好货</a>
  9.                 <span>0低价，便捷，安全，快速</span>
  10.             </div>
  11.             <div class="essp-xq2">
  12.                 <span>热门分类</span>
  13.                 <a href="#">美女写真</a>
  14.                 <a href="#">日本美女</a>
  15.                 <a href="#">中国美女</a>
  16.                 <a href="#">美国美女</a>
  17.                 <a href="#">AV美女</a>
  18.             </div>
  19.             <div class="essp-xq3">
  20.                 <div class="essp-xq3a">
  21.                     <div class="essp-xq3a1">
  22.                         <a href="#"><img src="img/999.jpg"></a>
  23.                         <a href="">解决实际的假发来得及反倒是浪费绝对是是好</a>
  24.                         <div class="essp-xq3a2">
  25.                             <i>￥999</i>
  26.                             <b>美女</b>
  27.                         </div>
  28.                     </div>
  29.                     <div class="essp-xq3a1">
  30.                         <a href="#"><img src="img/999.jpg"></a>
  31.                         <a href="">解决实际的假发来得及反倒是浪费绝对是是好</a>
  32.                         <div class="essp-xq3a2">
  33.                             <i>￥999</i>
  34.                             <b>美女</b>
  35.                         </div>
  36.                     </div>
  37.                     <div class="essp-xq3a1">
  38.                         <a href="#"><img src="img/999.jpg"></a>
  39.                         <a href="">解决实际的假发来得及反倒是浪费绝对是是好</a>
  40.                         <div class="essp-xq3a2">
  41.                             <i>￥999</i>
  42.                             <b>美女</b>
  43.                         </div>
  44.                     </div>
  45.                     <div class="essp-xq3a1">
  46.                         <a href="#"><img src="img/999.jpg"></a>
  47.                         <a href="">解决实际的假发来得及反倒是浪费绝对是是好</a>
  48.                         <div class="essp-xq3a2">
  49.                             <i>￥999</i>
  50.                             <b>美女</b>
  51.                         </div>
  52.                     </div>
  53.                     <div class="essp-xq3a1">
  54.                         <a href="#"><img src="img/999.jpg"></a>
  55.                         <a href="">解决实际的假发来得及反倒是浪费绝对是是好</a>
  56.                         <div class="essp-xq3a2">
  57.                             <i>￥999</i>
  58.                             <b>美女</b>
  59.                         </div>
  60.                     </div>
  61.                     <div class="essp-xq3a1">
  62.                         <a href="#"><img src="img/999.jpg"></a>
  63.                         <a href="">解决实际的假发来得及反倒是浪费绝对是是好</a>
  64.                         <div class="essp-xq3a2">
  65.                             <i>￥999</i>
  66.                             <b>美女</b>
  67.                         </div>
  68.                     </div>
  69.                     <div class="essp-xq3a1">
  70.                         <a href="#"><img src="img/999.jpg"></a>
  71.                         <a href="">解决实际的假发来得及反倒是浪费绝对是是好</a>
  72.                         <div class="essp-xq3a2">
  73.                             <i>￥999</i>
  74.                             <b>美女</b>
  75.                         </div>
  76.                     </div>
  77.                     <div class="essp-xq3a1">
  78.                         <a href="#"><img src="img/999.jpg"></a>
  79.                         <a href="">解决实际的假发来得及反倒是浪费绝对是是好</a>
  80.                         <div class="essp-xq3a2">
  81.                             <i>￥999</i>
  82.                             <b>美女</b>
  83.                         </div>
  84.                     </div>
  85.                 </div>
  86.                 <div class="essp-xq3b">
  87.                     <a href="#"><img src="img/1.png"> </a>
  88.                     <a href="#"><img src="img/2.png"> </a>
  89.                     <a href="#"><img src="img/3.png"> </a>
  90.                     <a href="#"><img src="img/4.png"> </a>
  91. <!--                    <a href="#" class="er1"><img src="img/ad1.png" class="er1"> </a>-->
  93.                     <span class="er1"><img src="img/ad1.png"></span>
  94.                     <span class="er1"><img src="img/ad2.jpg"></span>
  95. <!--                    <span>2</span>--
  96.                 </div>
  97.             </div>
  98.         </div>
  99.     </div>
  100. </body>

CSS代码：

  1. *{
  2.     margin: 0px;
  3.     padding: 0px;
  4.     /*background: #cccccc;*/
  5.     /*font-size:13px;*/
  6.     /*color: #333333;*/
  7.     /*border: 1px solid red;*/
  9. }
  10. a{
  11.     text-decoration: none;
  12. }
  13. body{
  14.     background: #cccccc;
  15. }
  16. .essp{
  17.     width: 1200px;
  18.     margin: auto;
  19.     background: #ffffff;
  21. }
  22. .essp>.essp-bt{
  23.     padding: 20px;
  24.     text-align: center;
  25.     background: #cccccc;
  26. }
  27. .essp>.essp-bt span{
  28.     font-size: 30px;
  29.     color: #333;
  30.     border-bottom: 5px solid red;
  31. }
  32. .essp>.essp-xq>.essp-xq1{
  33.     margin: 10px 10px;
  34.     border-bottom: 1px solid #cccccc;
  35.     /*background: #ffffff;*/
  36.     /*color: #333333;*/
  37.     /*font-size: 25px;*/
  38.     display: flex;
  39.     padding: 8px;
  41. }
  42. .essp>.essp-xq>.essp-xq1>a{
  43.     font-size: 20px;
  44.     color: #333333;
  45.     font-weight: bold;
  47. }
  48. .essp>.essp-xq>.essp-xq1>span{
  49.     font-size: 13px;
  50.     color: red;
  51.     margin-left: 20px;
  52.     align-self:flex-end;
  54. }
  55. .essp>.essp-xq>.essp-xq2{
  56.     margin-bottom: 8px;
  57.     margin-left: 15px;
  58. }
  59. .essp>.essp-xq>.essp-xq2>span{
  60.     font-size: 20px;
  61.     color: red;
  62.     /*margin-bottom: 10px;*/
  63. }
  64. .essp>.essp-xq>.essp-xq2>a{
  65.     font-size: 13px;
  66.     color: #333333;
  67.     margin: 15px;
  68. }
  69. .essp>.essp-xq>.essp-xq3{
  70.     /*width: 1200px;*/
  71.     /*height: 480px;*/
  72.     display: grid;
  73.     grid-template-columns: 780px 380px;
  74.     grid-template-rows: 460px;
  75.     grid-gap:10px;
  76.     justify-content: center;
  77. }
  78. .essp>.essp-xq>.essp-xq3>.essp-xq3a{
  79.     display: grid;
  80.     grid-template-columns: repeat(4,185px);
  81.     grid-template-rows: 220px;
  82.     justify-content: center;
  83.     grid-gap: 12px;
  84.     /*justify-content: center;*/
  85.     /*align-items: center;*/
  86. }
  87. .essp>.essp-xq>.essp-xq3>.essp-xq3a>.essp-xq3a1{
  88.     display: grid;
  89.     grid-template-columns: 100%;
  90.     grid-template-rows: 60% 20% 10%;
  91.     grid-gap: 5%;
  92. }
  93. .essp>.essp-xq>.essp-xq3>.essp-xq3a>.essp-xq3a1 img,
  94. .essp>.essp-xq>.essp-xq3>.essp-xq3b img{
  95.     width: 100%;
  96.     height: 100%;
  97.     border-radius: 5px;
  98. }
  99. .essp>.essp-xq>.essp-xq3>.essp-xq3a>.essp-xq3a1 a{
  100.     color: #333333;
  101.     font-size: 13px;
  102. }
  103. .essp>.essp-xq>.essp-xq3>.essp-xq3a>.essp-xq3a1>.essp-xq3a2{
  104.     display: grid;
  105.     grid-template-columns: 50% 50%;
  106.     grid-template-rows: 100%;
  107.     /*justify-content: space-between;*/
  108. }
  109. .essp>.essp-xq>.essp-xq3>.essp-xq3a>.essp-xq3a1>.essp-xq3a2 i{
  110.     color: red;
  111.     font-size: 13px;
  112. }
  113. .essp>.essp-xq>.essp-xq3>.essp-xq3a>.essp-xq3a1>.essp-xq3a2 b{
  114.     margin-left: auto;
  115.     background: #0077aa;
  116.     color: #e9e9e9;
  117.     font-size: 13px;
  118.     border-radius: 3px;
  119. }
  120. .essp>.essp-xq>.essp-xq3>.essp-xq3b{
  121.     display: grid;
  122.     grid-template-columns: 46% 46%;
  123.     grid-template-rows: 30% 30% 15% 15%;
  124.     grid-gap: 3%;
  125.     justify-content: center;
  126.     /*grid-template-areas: '1 2'*/
  127.     /*                     '3 4'*/
  128.     /*                     '5 5'*/
  129.     /*                     '6 6';*/
  131. }
  132. .essp>.essp-xq>.essp-xq3>.essp-xq3b>.er1{
  133.     grid-column-start: span 2;
  135. }
  136. .essp>.essp-xq>.essp-xq3>.essp-xq3b>.er2{
  137.     grid-column-start: span 2;
  139. }

运行截图

手写作业

上一条：12月29日练习：php中文网footer案例（组件footer）下一条：前端简单基础页面
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多