首页 / HTML5 / 移动端html5列表的制作方法

移动端html5列表的制作方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了移动端html5列表的制作方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2518字，纯文字阅读大概需要4分钟。

内容图文


前言

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

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

最简单的列表

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

移动端html5列表的制作方法 - 文章图片

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

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>

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

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

SASS代码

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

还是一个简单的列表

首先,我们来看效果图:

移动端html5列表的制作方法 - 文章图片

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

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

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

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

以上就是移动端html5列表的制作方法的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的移动端html5列表的制作方法全部内容，希望文章能够帮你解决移动端html5列表的制作方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/387648.html

来源：【匿名】