Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Gird网格布局实现商品列表页--PHP培训十期线上班
Blogger Information
Blog 11
fans 0
comment 0
visits 8065
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
Gird网格布局实现商品列表页--PHP培训十期线上班
宋明杰
Original
696 people have browsed it

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. }

运行截图

手写作业

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：字写得好看的人, 学习能力肯定不会差的... 相信自己, 一定可以掌握grid
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