ASCII码 ASCII码

css-移动端布局-商品列表

发布于:2022-03-31 11:11:30  栏目:技术文档

商品列表实战:

  1. <div class="item">
  2. <img src="images/2.jpg" alt="">
  3. <div class="box">
  4. <div class="desc">象有秘密 日式陶瓷...</div>
  5. <span class="tag">¥</span>
  6. <span class="price">10.9</span>
  7. <span class="hadpay">30人已购买</span>
  8. </div>
  9. </div>

  1. .hw{
  2. padding: .15rem;
  3. }
  4. .hw .item{
  5. background-color: white;
  6. border-radius: .05rem;
  7. width: 100%;
  8. }
  9. .hw .item img{
  10. width: 100%;
  11. border-radius: .05rem .05rem 0 0;
  12. }
  13. .hw .item .box{
  14. margin: .1rem;
  15. display: grid;
  16. grid-template-columns: .1rem .5rem 1fr;
  17. }
  18. .hw .item .box .desc {
  19. grid-column: span 3;
  20. font-size: .14rem;
  21. }
  22. .hw .item .tag,.price{
  23. color: red;
  24. font-size: .14rem;
  25. }
  26. .hw .item .hadpay{
  27. font-weight: bold;
  28. font-size: .14rem;
  29. }
相关推荐
阅读 +