Blogger Information
Blog 8
fans 0
comment 0
visits 3661
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
淘宝首页商品列表
平凡之路
Original
371 people have browsed it

淘宝首页商品列表

1.html代码

  1. <div class="list">
  2. <!-- 1. 商品列表 2列3行-->
  3. <ul class="list1">
  4. <!-- 2 .商品内部列表 3行3列-->
  5. <li class="foot">
  6. <!-- 3.列表内部 内容 -->
  7. <a class="tp" href=""><img src="/课程源码/0329/0329/images/items/item6.png" alt="" /></a>
  8. <span>标题标题标题标题标题标题标题标题标题标题</span>
  9. <div class="foot1">
  10. <a class="fh" href=""></a>
  11. <a class="monly" href="">55</a>
  12. <a class="xl" href="">1000+人已购买</a>
  13. </div>
  14. </li>
  15. <li class="foot">
  16. <!-- 3.列表内部 内容 -->
  17. <a class="tp" href=""><img src="/课程源码/0329/0329/images/items/item6.png" alt="" /></a>
  18. <span>标题标题标题标题标题标题标题标题标题标题</span>
  19. <div class="foot1">
  20. <a class="fh" href=""></a>
  21. <a class="monly" href="">66</a>
  22. <a class="xl" href="">2000+人已购买</a>
  23. </div>
  24. </li>
  25. <li class="foot">
  26. <!-- 3.列表内部 内容 -->
  27. <a class="tp" href=""><img src="/课程源码/0329/0329/images/items/item6.png" alt="" /></a>
  28. <span>标题标题标题标题标题标题标题标题标题标题</span>
  29. <div class="foot1">
  30. <a class="fh" href=""></a>
  31. <a class="monly" href="">178</a>
  32. <a class="xl" href="">13000+人已购买</a>
  33. </div>
  34. </li>
  35. <li class="foot">
  36. <!-- 3.列表内部 内容 -->
  37. <a class="tp" href=""><img src="/课程源码/0329/0329/images/items/item6.png" alt="" /></a>
  38. <span>标题标题标题标题标题标题标题标题标题标题</span>
  39. <div class="foot1">
  40. <a class="fh" href=""></a>
  41. <a class="monly" href="">165</a>
  42. <a class="xl" href="">1000+人已购买</a>
  43. </div>
  44. </li>
  45. <li class="foot">
  46. <!-- 3.列表内部 内容 -->
  47. <a class="tp" href=""><img src="/课程源码/0329/0329/images/items/item6.png" alt="" /></a>
  48. <span>标题标题标题标题标题标题标题标题标题标题</span>
  49. <div class="foot1">
  50. <a class="fh" href=""></a>
  51. <a class="monly" href="">143</a>
  52. <a class="xl" href="">2000+人已购买</a>
  53. </div>
  54. </li>
  55. <li class="foot">
  56. <!-- 3.列表内部 内容 -->
  57. <a class="tp" href=""><img src="/课程源码/0329/0329/images/items/item6.png" alt="" /></a>
  58. <span>标题标题标题标题标题标题标题标题标题标题</span>
  59. <div class="foot1">
  60. <a class="fh" href=""></a>
  61. <a class="monly" href="">122</a>
  62. <a class="xl" href="">4000+人已购买</a>
  63. </div>
  64. </li>
  65. </ul>
  66. </div>

2.css代码

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. .list .list1 {
  7. display: grid;
  8. grid-template-columns: repeat(2, 1fr);
  9. grid-template-rows: repeat(3, 1rf);
  10. gap: 0.1rem;
  11. place-items: center;
  12. background-color: rgb(241, 241, 241);
  13. border-radius: 0.5rem;
  14. margin: 0.05rem 0 0.05rem 0;
  15. }
  16. .list .list1 .foot {
  17. display: grid;
  18. grid-template-columns: repeat(1, 1fr);
  19. grid-template-rows: repeat(3, 1rf);
  20. gap: 0.005rem;
  21. border-radius: 0.1rem;
  22. place-items: center;
  23. background-color: white;
  24. }
  25. .list .list1 .foot .tp {
  26. width: 46vw;
  27. height: 80%;
  28. }
  29. .list .list1 .foot span {
  30. margin: 0rem auto 0rem 0.1rem;
  31. }
  32. .list .list1 .foot .foot1 {
  33. margin: 0rem auto 0rem 0.1rem;
  34. }
  35. .list .list1 .foot .foot1 .fh {
  36. font-size: 0.1rem;
  37. color: coral;
  38. }
  39. .list .list1 .foot .foot1 .monly {
  40. font-size: 0.12rem;
  41. color: coral;
  42. }
  43. .list .list1 .foot .foot1 .xl {
  44. font-size: 0.08rem;
  45. color: darkgray;
  46. }

3.效果图

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!