Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 用grid放二手商品交易列表
Blogger Information
Blog 11
fans 0
comment 0
visits 27457
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放二手商品交易列表
饮雪煮茶
Original
751 people have browsed it

全部通过grid画盒子，嵌套做出来的。
元素对齐还有点问题。

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>二手商品交易grid</title>
  6.     <link rel="stylesheet" href="./public-second-hand.css">
  7. </head>
  8. <body>
  9. <div class="public-second-hand">
  10.     <div class="public-second-title1">
  11.         <a href="">抢好货</a>
  12.         <span>0低价, 便捷,安全,快速</span>
  13.     </div>
  14.     <div class="public-second-title2">
  15.         <h3>热门分类</h3>
  16.         <a href="">美女写着</a>
  17.         <a href="">日本美女</a>
  18.         <a href="">美国美女</a>
  19.         <a href="">国内美女</a>
  20.         <a href="">AV美女</a>
  21.     </div>
  22.     <div class="public-second-content">
  23.         <div class="public-second-list">
  24.             <div class="public-second-item">
  25.                 <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  26.                 <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  27.                 <span><i>&yen;345</i><i>美女</i></span>
  28.             </div>
  29.             <div class="public-second-item">
  30.                 <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  31.                 <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  32.                 <span><i>&yen;345</i><i>美女</i></span>
  33.             </div>
  34.             <div class="public-second-item">
  35.                 <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  36.                 <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  37.                 <span><i>&yen;345</i><i>美女</i></span>
  38.             </div>
  39.             <div class="public-second-item">
  40.                 <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  41.                 <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  42.                 <span><i>&yen;345</i><i>美女</i></span>
  43.             </div>
  44.             <div class="public-second-item">
  45.                 <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  46.                 <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  47.                 <span><i>&yen;345</i><i>美女</i></span>
  48.             </div>
  49.             <div class="public-second-item">
  50.                 <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  51.                 <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  52.                 <span><i>&yen;345</i><i>美女</i></span>
  53.             </div>
  54.             <div class="public-second-item">
  55.                 <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  56.                 <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  57.                 <span><i>&yen;345</i><i>美女</i></span>
  58.             </div>
  59.             <div class="public-second-item">
  60.                 <a href=""><img src="./static/images/shop/shop1.jpg" alt=""></a>
  61.                 <p>美女性感写真海报墙艺术装饰画贴画图1</p>
  62.                 <span><i>&yen;345</i><i>美女</i></span>
  63.             </div>
  65.         </div>
  66.         <div class="public-second-aside">
  67.             <div class="public-second-quick">
  68.                 <img src="./static/images/ad/1.png" alt="">
  69.                 <img src="./static/images/ad/2.png" alt="">
  70.                 <img src="./static/images/ad/3.png" alt="">
  71.                 <img src="./static/images/ad/4.png" alt="">
  72.             </div>
  73.             <div class="public-second-ad">
  74.                 <img src="./static/images/ad/image.png" alt="">
  75.                 <img src="./static/images/ad/ad2.jpg" alt="">
  76.             </div>
  78.         </div>
  79.     </div>
  80. </div>
  81. </body>
  82. </html>

css

  1. @import "./static/css/public_reset.css";
  3. .public-second-hand{
  4.     width: 1200px;
  5.     margin: 0 auto;
  6.     background-color: #ffffff;
  7.     padding: 10px;
  8.     box-sizing: border-box;
  9.     display: grid;
  10.     grid-template-rows: 40px 40px 420px;
  11.     grid-template-columns: 1fr;
  12.     grid-column-gap: 10px;
  13.     border-radius: 5px;
  14. }
  15. .public-second-hand:hover{
  16.     box-shadow: 0 0 3px #888;
  17. }
  19. .public-second-hand > .public-second-title1{
  20.     display: grid;
  21.     grid-template-rows: 1fr;
  22.     grid-template-columns: 90px 1fr;
  23.     border-bottom: 1px solid #999;
  24.     margin-bottom: 5px;
  25. }
  27. .public-second-hand > .public-second-title1 > a{
  28.     font-size: 23px;
  29.     align-self: end;
  30. }
  31. .public-second-hand > .public-second-title1 > span{
  32.     color: #f00;
  33.     align-self: end;
  34. }
  35. .public-second-hand > .public-second-title2 {
  36.     display: grid;
  37.     grid-template-rows: 1fr;
  38.     grid-template-columns: 120px repeat(5,80px);
  39. }
  40. .public-second-hand > .public-second-title2 > h3{
  41.     font-size: 23px;
  42.     color: #f00;
  43.     align-self: end;
  44. }
  45. .public-second-hand > .public-second-title2 >a {
  46.     align-self: end;
  47. }
  49. .public-second-hand > .public-second-content {
  50.     display: grid;
  51.     grid-template-rows: 1fr;
  52.     grid-template-columns: 2fr 1fr;
  53.     margin-top: 15px;
  54. }
  56. .public-second-hand > .public-second-content > .public-second-list{
  57.     /*height: 410px;*/
  58.     padding: 10px;
  59.     display: grid;
  60.     grid-template-rows: repeat(2,1fr);
  61.     grid-template-columns: repeat(4,1fr);
  62.     box-sizing: border-box;
  63. }
  64. .public-second-hand > .public-second-content > .public-second-list > .public-second-item{
  65.     width: 178px;
  66.     height: 200px;
  67.     display: grid;
  68.     grid-template-rows: 130px 45px 25px;
  69.     grid-template-columns: 1fr;
  70. }
  71. .public-second-hand > .public-second-content > .public-second-list > .public-second-item > span > i{
  72.     font-style: normal;
  73. }
  74. .public-second-hand > .public-second-content > .public-second-list > .public-second-item > span{
  75.     display: grid;
  76.     grid-template-rows: 1fr;
  77.     grid-template-columns: 140px 1fr;
  78. }
  79. .public-second-hand > .public-second-content > .public-second-list > .public-second-item > span > i:first-of-type{
  80.     color: #f00;
  81. }
  82. .public-second-hand > .public-second-content > .public-second-list > .public-second-item > span > i:last-of-type{
  83.     background-color: #55ce9f;
  84.     height: 18px;
  85.     padding: 0 5px;
  86.     color: #fff;
  87.     /*border-radius: 5px;*/
  88. }
  89. .public-second-hand > .public-second-content > .public-second-list img{
  90.     width: 176px;
  91.     height: 120px;
  92.     border-radius: 5px;
  93. }
  95. .public-second-hand > .public-second-content > .public-second-aside > {
  96.     padding: 10px;
  97.     display: grid;
  98.     grid-template-rows: repeat(2,400px);
  99.     grid-template-columns: 1fr;
  100.     box-sizing: border-box;
  101. }
  102. .public-second-hand > .public-second-content > .public-second-aside > .public-second-quick{
  103.     display: grid;
  104.     grid-template-rows: repeat(2,1fr);
  105.     grid-template-columns: repeat(2,1fr);
  106.     grid-row-gap: 10px;
  107. }
  108. .public-second-hand > .public-second-content > .public-second-aside > .public-second-quick > img{
  109.     width: 190px;
  110.     height: 130px;
  111. }
  112. .public-second-hand > .public-second-content > .public-second-aside > .public-second-ad {
  113.     display: grid;
  114.     grid-template-rows: 60px 60px;
  115.     grid-template-columns: 1fr;
  116.     grid-row-gap: 10px;
  117. }
  118. .public-second-hand > .public-second-content > .public-second-aside >.public-second-ad >img{
  119.     width: 393px;
  120.     height: 60px;
  121. }

效果图

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：全部用grid, 有点狠了点... 不过, 做为一个练习, 是一个不错的尝试... 其它前面的二个标题栏用flex会更方便, 下面的主体图文列表,非常适合用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