search

博客列表 >用grid放二手商品交易列表

用grid放二手商品交易列表

饮雪煮茶
饮雪煮茶原创
2019年12月30日 13:25:36750浏览

全部通过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. }

效果图

上一条：12.27号作业下一条：WEB前端教学-flex 6个属性练习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多