仿淘宝商品列表练习

html:

  1.         <div class="list">
  2.             <div class="title">---------你可能还喜欢的---------</div>
  3.             <div class="unit">
  4.                 <div class="img">
  5.                     <img src="../0328课件/imges/item17.webp" alt="">
  6.                 </div>
  7.                 <div class="dedail">
  8.                     <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述</div>
  9.                     <div class="plc"><span class="iconfont icon-renminbi1688">89</span><span class="num">2000+人购买</span></div>
  10.                 </div>
  11.             </div>
  12.             <div class="unit">
  13.                 <div class="img">
  14.                     <img src="../0328课件/imges/item18.webp" alt="">
  15.                 </div>
  16.                 <div class="dedail">
  17.                 <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述</div>
  18.                 <div class="plc"><span class="iconfont icon-renminbi1688">200</span><span class="num">2000+人购买</span></div>
  19.                 </div>
  20.             </div>
  21.             <div class="unit">
  22.                 <div class="img">
  23.                     <img src="../0328课件/imges/item19.webp" alt="">
  24.                 </div>
  25.                 <div class="dedail">
  26.                 <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述</div>
  27.                 <div class="plc"><span class="iconfont icon-renminbi1688">150</span><span class="num">10w+人购买</span></div>
  28.                 </div>
  29.             </div>
  30.             <div class="unit">
  31.                 <div class="img">
  32.                     <img src="../0328课件/imges/item20.webp" alt="">
  33.                 </div>
  34.                 <div class="dedail">
  35.                 <div class="desc">商品描述商品描述,商品描述商品描述,商品描述商品描述</div>
  36.                 <div class="plc"><span class="iconfont icon-renminbi1688">100</span><span class="num">100w+人购买</span></div>
  37.                 </div>
  38.             </div>
  40.         </div>

css：

  1. main .list {
  2.     display: grid;
  3.     grid-template-columns: repeat(2,1fr);
  4.     gap: 0.1rem;
  5.     padding: 0.1rem 0 0.5rem 0;
  6. }
  8. main .list .title {
  9.     grid-column: span 2;
  10.     text-align: center;
  11.     color: darkorange;
  12.     font-weight: bolder;
  13.     padding: 10px 0;
  14.     font-size: larger;
  15. }
  16. main .list .unit {
  17.     background-color: #fff;
  18.     display: grid;
  19.     border-radius: 0.1rem;
  20. }
  22. main .list .unit img {
  23.     border-radius: 0.1rem 0.1rem ;
  24.     width: 100%;
  25.     height: 100%;
  26. }
  28. main .list .unit .dedail {
  29.    display: grid;
  30.    padding: 0.1rem;
  31.    gap: 0.1rem;
  32. }
  34. main .list .unit .dedail .plc .iconfont {
  35.     color: orange;
  36.     font-size: large;
  37.     margin-right: 0.1rem;   
  38. }
  39. main .list .unit .dedail .plc .num {
  40.     color: #ccc;
  41. }

效果：

更多相关文章

  1. 淘宝移动端首页的商品列表
  2. HTML 学习
  3. css-移动端布局-商品列表
  4. 仿移动端商品部分
  5. 淘宝移动端首页的商品列表
  6. 淘宝移动端首页的商品列表
  7. 移动布局原理、实战手机页面的基本整体架构页眉,页脚,主体。
  8. Android(安卓)四大组件 之 bindService流程
  9. 最强 Android(安卓)Studio 使用小技巧和快捷键总结

随机推荐

  1. python实现微信自动聊天
  2. Ubuntu 下TinyOS在CC2530上移植之环境搭
  3. 055 Python第三方库安装
  4. Process Pool实现Python的并行执行
  5. Python学习笔记（3）：数据集操作-列的统一操作
  6. Linux中Python安装与配置(CentOS-6.5：Pyth
  7. Python列表和字典的学习
  8. Python Django Vue 项目创建
  9. 在Python / IPython解释器中为单个下划线
  10. 深入理解python中得闭包