本文摘自PHP中文网,作者黄舟,侵删。
H5移动端各种各样的列表的制作方法(四)
前情回顾
《H5移动端各种各样的列表的制作方法(一)》
《H5移动端各种各样的列表的制作方法(二)》
《H5移动端各种各样的列表的制作方法(三)》
如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.
前面三章,都是说一个普通的列表应该如何去实现.难度由易到难,但总的来说,一看就能掌握.这一章,我们来做图文列表.
普通两列图(图为正方形)文列表
两列的图文列表是非常常见的.在JD\TB等电商移动端H5更是比比皆是.这里,我们先来做一个最简单的.如下图所示.
这里是一个非常简单的双列布局的图文列表,每一块,包含图片,名称和价格.在PC端实现这样的布局实在是太简单了.但是由于我们在移动端,不同的手机的宽度是不一致的.因此,要求是自适应的.
这里的所有图片都是统一规格,皆为正方形的.在实际的项目中,一般都会对产品的图片有所要求.如果您的产品并非正方形的.下面我们会有相关的教程.
html代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!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代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .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.
这里,我们将全站内通用的一些样式摘取出来.这样方便代码复用.
小结
这一章节,我们通过简单的一个双列布局的图文列表,着重要掌握以下几点内容
在移动端,要用到左右边框的时候,尽量不要使用border
边框来实现.本例使用 outline
来模拟.
在使用 outline
来模拟边框的时候,一定要配合背景颜色的使用,来避免 2px
边框.
CSS3文字描边的实现方法.text-shadow
css3一行文字标题超出显示省略号的实现方法
sass引入代码块的两种方法,以及之间的异同(请自行考虑或参考相关教程)
在html5
中 a
标签是可以嵌套块级元素的.而在xhtml
或者更早的html
版本里,是不推荐这样做的.这里不要混淆,或者感觉到不合适.与时俱进.
以上就是H5移动端各种各样的列表的制作方法详解(四)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5实现分层屏幕适配
如何利用HTML5 canvas旋转图片?(实例演示)
HTML5新特性之跨文档消息传输详解
HTML5之使用地理定位的代码分享
h5元素/属性/格式化的详细介绍
HTML5上传视频无法播放以及兼容的解决方法(图)
HTML5 实现如何将两个矩形相互叠加
HTML5桌面通知提示功能的实现
用h5的canvas做出弹幕效果
(server-sent events)浅谈h5 中的服务器推送事件
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » H5移动端各种各样的列表的制作方法详解(四)