商品列表实战：

  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;
  22. }
  23. .hw .item  .tag,.price{
  24.     color: red;
  25.     font-size: .14rem;
  26. }
  27. .hw .item  .hadpay{
  28.     font-weight: bold;
  29.     font-size: .14rem;
  30. }

更多相关文章

  1. 为什么我不建议在当前购买5G手机
  2. R语言数据挖掘实践——关联分析预测用户购买行为习惯
  3. SQLServer查询某个时间段购买过商品的所有用户
  4. Android(安卓)Market新增运营商结算方式
  5. 1109标签练习
  6. 长尾关键词有那几种形式？
  7. 二手闲置物品交易数据快照
  8. 2021年便宜购买阿里云服务器攻略（阿里云小站篇）！
  9. 新手购买阿里云服务器图文教程及注意事项

随机推荐

  1. android 蓝牙各种UUID
  2. 3、android颜色取值
  3. Android添加横线和竖线分割界面
  4. Android开机分析
  5. Android官方资料--Adoptable Storage
  6. android dialog style属性设置
  7. 关于android的monkey测试
  8. Android Pid和Uid
  9. Android(安卓)ANR
  10. Android内存泄漏调试教程