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

来源：动视网责编：小采时间：2020-11-27 15:11:49

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

H5移动端各种各样的列表的制作方法详解(四):H5移动端各种各样的列表的制作方法(四)前情回顾《H5移动端各种各样的列表的制作方法(一)》《H5移动端各种各样的列表的制作方法(二)》《H5移动端各种各样的列表的制作方法(三)》如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上

推荐度：

点击下载本文 文档为doc格式

导读H5移动端各种各样的列表的制作方法详解(四):H5移动端各种各样的列表的制作方法(四)前情回顾《H5移动端各种各样的列表的制作方法(一)》《H5移动端各种各样的列表的制作方法(二)》《H5移动端各种各样的列表的制作方法(三)》如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上

前面三章,都是说一个普通的列表应该如何去实现.难度由易到难,但总的来说,一看就能掌握.这一章,我们来做图文列表.

普通两列图(图为正方形)文列表

两列的图文列表是非常常见的.在JD\TB等电商移动端H5更是比比皆是.这里,我们先来做一个最简单的.如下图所示.

这里是一个非常简单的双列布局的图文列表,每一块,包含图片,名称和价格.在PC端实现这样的布局实在是太简单了.但是由于我们在移动端,不同的手机的宽度是不一致的.因此,要求是自适应的.

这里的所有图片都是统一规格,皆为正方形的.在实际的项目中,一般都会对产品的图片有所要求.如果您的产品并非正方形的.下面我们会有相关的教程.

html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>list 2</title>
<link rel="stylesheet" href="../style/style.css"></head><body><p class="list_2">
 <ul>
 <li>
 <a href="">
 <img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
 <h4 class="goods_title">这里是商品标题1</h4>
 <em class="goods_price">￥4999.00</em>
 </a>
 </li>
 <li>
 <a href="">
 <img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
 <h4 class="goods_title">这里是商品标题2</h4>
 <em class="goods_price">￥4999.00</em>
 </a>
 </li>
 <li>
 <a href="">
 <img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
 <h4 class="goods_title">这里是商品标题3</h4>
 <em class="goods_price">￥4999.00</em>
 </a>
 </li>
 <li>
 <a href="">
 <img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
 <h4 class="goods_title">这里是商品标题4</h4>
 <em class="goods_price">￥4999.00</em>
 </a>
 </li>
 </ul></p></body></html>

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

SASS代码

.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;}

再次强调一下,本系列教程的CSS部分是采用了SASS语法,如果你不会SASS语法,建议花上半个小时到一个小时的时间来学习SASS.

这里,我们将全站内通用的一些样式摘取出来.这样方便代码复用.