移动端H5各种各样的列表的制作方法(四)

代码比较长.但是还是一眼就能看清楚的.我们给不同的元素加上了不同的class.而这样做的目的是为了在全站范围内,用到这些元素的基本样式可以得到统一,并且实现CSS的代码复用.

.list_2 {
    ul {
 @extend .cf; // 引用清理浮动代码片,看不懂请看本人scss相关教程
 li {
     width: 50%;float: left;padding: 1rem 0;
     outline: 1px solid #ddd;  // 使用 outline 模拟边框 (outline不占据盒子模型)
     background: #fff;  // 使用白色背景颜色,防止 outline 重叠造成 2px 线条
     a {
  display: block;
  text-decoration: none; // 去除默认下划线
     }
     .goods_title,.goods_price {
  padding: 0 1rem; // 加上左右内填充,防止文字和边框粘结
  text-align: center;
     }
     .goods_photo {
  width: 60%;margin: .5rem auto;display: block;
     }
 }
    }
}
// 全站范围内用到的图文基本样式
.goods_title,.goods_price {
    display: block;position: relative;
    @include ts(); // 引用文字描白边代码片
    @include online(1.8rem); // 引用文字超出一行省略号代码片
}
.goods_title {color:#000;font-size: 1.2rem;}
.goods_price {color:#f60;font-size: 1.5rem;font-weight: bold;}