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

百变鹏仔 2个月前 (10-18) #H5教程

文章标签制作方法

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

前情回顾

在上一篇博文《移动端各种各样的列表的制作方法(一)》中,我们通过两个简单的DEMO,演示了一下在移动端H5中的列表制作.不过,这两个演示还是太简单了.可能大家觉得不过如此嘛.这一章,我们将制作稍微复杂一点点的列表.

如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.

带右箭头的列表

这个示例,其实和上一张的第二个差不多,只是右边多了一个右箭头.我们要实现的效果,如下图所示:

如上所示,在列表的右边,有一个右箭头.可能,你会奇怪,为什么右边的下面的线条顶头了?哎,这就是我们这的设计师的设计.你们只需要知道了原理,那么怎么做都是可以的.

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 1</title><link rel="stylesheet" href="../style/style.css"></head><body><p class="list_1">    <ul>        <li><a href="">这是一个列表1</a></li>        <li><a href="">这是一个列表2</a></li>        <li><a href="">这是一个列表3</a></li>        <li><a href="">这是一个列表4</a></li>        <li><a href="">这是一个列表5</a></li>        <li><a href="">这是一个列表6</a></li>        <li><a href="">这是一个列表7</a></li>        <li><a href="">这是一个列表8</a></li>    </ul></p></body></html>

html代码和第一章的例子是一模一样的.

SASS代码

.list_1 {    ul {padding-left: 1.6rem;}    li {        border-bottom: 1px solid #ddd;padding-right: 1.6rem;        a {            display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;                        background:url("../image/icon_goto.png") right center no-repeat;                        background-size: auto 1.4rem;        }    }}}

实现起来也比较简单,就是给 a 加上了一个右箭头的背景图片.没什么稀罕的.

但这里需要特别说明的是, background-size其实是可以缩写到 background 里面去的.但是因为安卓4.4以下不兼容,所以,我们目前来说,还是需要拆来来写.预计,在2016年年底,我们可能就能忽略到所有的老版本的安卓了.但眼下,貌似不行.

它的缩写代码是:

background:url("../image/icon_goto.png") right center/auto 1.4rem no-repeat;

好,第一个demo就这么轻松的完成了.下面我们来做更加复杂一丢丢的.

带日期的,带右箭头的列表

首先,我们来看效果图:

这个列表也没有很复杂,只是添加了一个日期.日期靠右显示,并且日期不会和标题重叠.我们来看一下是怎么做的.

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 1</title><link rel="stylesheet" href="../style/style.css"></head><body><p class="list_1">    <ul>        <li><a href=""><time>2016.03.14</time>这是一个列表1</a></li>        <li><a href=""><time>2016.03.14</time>这是一个列表2</a></li>        <li><a href=""><time>2016.03.14</time>这是一个列表3</a></li>        <li><a href=""><time>2016.03.14</time>这是一个列表4</a></li>        <li><a href=""><time>2016.03.14</time>这是一个列表5</a></li>        <li><a href=""><time>2016.03.14</time>这是一个列表6</a></li>        <li><a href=""><time>2016.03.14</time>这是一个列表7</a></li>        <li><a href=""><time>2016.03.14</time>这是一个列表8</a></li>    </ul></p></body></html>

首先,html5提供了一个 time 标签,用来专门放置时间.我们以往都是使用span或者其他标签来制作.此后,时间有了专门的标签了.真是意见可喜可贺的事情.

其次,为什么time标签在a里面呢?因为,移动端都是触摸操作.我们要保证访客在点击列表的任意位置都能打开链接,因此,a要块状化,并且最大化的处理.这点,和我们在PC端制作的时候是很不一样的.

关于列表日期,我还有一篇老的博文,有兴趣可以阅读一下,《新闻列表中标题和日期的左右分别对齐的几种处理方法》

SASS代码

.list_1 {    ul {padding-left: 1.6rem;}    li {        border-bottom: 1px solid #ddd;padding-right: 1.6rem;            a {            display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;                        background:url("../image/icon_goto.png") right center no-repeat;                        background-size: auto 1.4rem;                        padding-right: 1.5rem;        }        time {float: right;color: #999;}    }}

并没有特别复杂,只是为了防止日期和右箭头重叠,给 a 加了一个右内填充.另外,时间使用右浮动法,放到了右边去了.

小结

相信这两个DEMO并没有非常难理解,聪明的你一定是一看就明白了.我们小小的总结一下:

链接块状化,是为了便于移动端的用户能够更加方便的点击到链接
background-size 的使用方法和简写,以及为什么当下,我们不去简写这个属性.
时间有专门的 html5 标签—— time
右浮动法,定位右边的时间

文章推荐

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

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

前情回顾

带右箭头的列表

html代码

SASS代码

带日期的,带右箭头的列表

html代码

SASS代码

小结

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集