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


本文摘自PHP中文网,作者黄舟,侵删。

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

前言

随着移动互联网的发展,大量前端人员从pc端转移动端.而很多PC端的前端经验并不适用于移动端.前几日我撰写的一篇博文《移动端H5的一些基本知识点总结》获得了大量的点击量.因此,FungLeo决定,在接下来的时间里,我将围绕移动端,展开一系列的教程.

本系列文章的CSS部分,将全部采用SASS语法撰写.如果您不会SASS,建议阅读相关教程,包括本人的《CSS预编译技术之SASS学习经验小结》教程.
本系列文章将引用reset.scss和mixin.scss两个基础文档,用于重置浏览器样式,和基础的一些SASS代码块.由于代码较长,请参阅《移动端系列博文基础reset.scss和mixin.scss》获取.

本人水平有限,能力一般,因此文章中将不可避免的有错误和遗漏.因此,欢迎大家在文章里评论留言.我将在第一时间内回应.谢谢大家.

最简单的列表

首先,来一个最简单的列表.我们要实现的效果,如下图所示:

最简单的列表演示

如上所示,我们要实现的就是这样简单的列表.这个没有丝毫的难度.

html代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!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>

这里需要说明的是,移动端一定需要加上<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />这段代码.否则移动端的浏览器会当成PC版的网页,是可以伸缩的.

建议,服务器,数据库,后端程序,前台html以及CSS都全部统一为utf-8编码.避免因为编码造成乱码的情况.

SASS代码

1

2

3

4

5

6

.list_1 {    ul {}

    li {

        border-bottom: 1px solid #ddd;padding:0 1.6rem;       

        a {display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;}

    }

}

这里的单位全部使用的是rem,我们reset.scss里面,已经将html的字体大小设置为了62.5%,也就相当于正常情况下的10px.也就是说,上面的1.6rem相当于16px.至于为什么这么写,请到本文开头的链接里面查看前面我写的文章中的解释.
不会sass的,请先阅读sass相关教程.不要觉得难,一个小时保证学会,两天能玩的非常溜.

还是一个简单的列表

首先,我们来看效果图:

第二个简单的列表

这个列表咋一看,和上面的列表没有任何区别.但是,我们仔细看一下,会发现下面的线条是不顶头的.

不要奇怪,很多时候,设计师这样设计,是有其自己的设计理念的.作为前端人员,我们要忠实的还原设计师设计的一些小的细节.即便你认为这有点多此一举.呵呵.

html代码,和第一个示例完全一样.这里不再重复代码

SASS代码

1

2

3

4

5

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

    }

}

其实,也只是稍微的转换一下思路.将在demo1里面的加载li上的padding值,分配到ul和li上,就可以了.

小结

好,通过这样两个demo,我们应该对一些基本的情况有所了解了.FungLeo将在下面的章节里面,逐渐的提高列表的复杂程度.为大家呈现各种各样不同的列表.

这是两道开胃菜,非常的简单.需要说明的是这样几点:

  1. 不要给任何元素设置宽度,因为这是一个独占一行的列表

  2. 在不设置宽度的情况下,可以设定内填充,不会造成任何问题.

  3. 要做好隐藏溢出处理,防止标题过长导致折行.

以上就是H5移动端各种各样的列表的制作方法(一)的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

介绍几款引人注目的HTML5/jquery动画插件详情

HTML5 viewport总结讲述

h5中的定位

h5的块级标签汇总

HTML5缓存机制是什么?怎么更新缓存

HTML5 新表单元素

HTML5中设置或返回音视频是否在加载后即开始播放的属性autoplay

HTML5在工作中主要干什么

h5的组织内容如何使用

HTML5 能做什么

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...