淘宝首页商品列表

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. }
  7. .list .list1 {
  8.   display: grid;
  9.   grid-template-columns: repeat(2, 1fr);
  10.   grid-template-rows: repeat(3, 1rf);
  11.   gap: 0.1rem;
  12.   place-items: center;
  13.   background-color: rgb(241, 241, 241);
  14.   border-radius: 0.5rem;
  15.   margin: 0.05rem 0 0.05rem 0;
  16. }
  18. .list .list1 .foot {
  19.   display: grid;
  20.   grid-template-columns: repeat(1, 1fr);
  21.   grid-template-rows: repeat(3, 1rf);
  22.   gap: 0.005rem;
  23.   border-radius: 0.1rem;
  24.   place-items: center;
  25.   background-color: white;
  26. }
  28. .list .list1 .foot .tp {
  29.   width: 46vw;
  30.   height: 80%;
  31. }
  33. .list .list1 .foot span {
  34.   margin: 0rem auto 0rem 0.1rem;
  35. }
  37. .list .list1 .foot .foot1 {
  38.   margin: 0rem auto 0rem 0.1rem;
  39. }
  41. .list .list1 .foot .foot1 .fh {
  42.   font-size: 0.1rem;
  43.   color: coral;
  44. }
  46. .list .list1 .foot .foot1 .monly {
  47.   font-size: 0.12rem;
  48.   color: coral;
  49. }
  51. .list .list1 .foot .foot1 .xl {
  52.   font-size: 0.08rem;
  53.   color: darkgray;
  54. }

3.效果图

更多相关文章

  1. Intent打开系统设置界面(action列表)
  2. android 城市列表
  3. android 播放音乐示例
  4. Android中全屏或者取消标题栏
  5. android 应用程序全屏（没有状态栏和标题栏）
  6. Android实现三级联动下拉框 下拉列表spinner
  7. 简单实例：图文列表、表格（课程表）
  8. Android开发环境搭建
  9. Android在顶部标题栏添加按钮

随机推荐

  1. c语言中“switch case”语句怎么用？
  2. 详解C++ 多态公有继承
  3. c语言中什么是逗号运算符并举例
  4. strcpy函数的作用是什么？
  5. C++如何简单输出当前日期时间
  6. c语言中合法标识符有哪些
  7. C语言有几种注释方式
  8. C++在构造函数中使用new时，需要注意这些事
  9. 在什么语言中字符串以\0标志字符串的结
  10. 声明动态数组的语句怎么写