挪移端html5列表的制作办法-

发布时间：08/01 来源：未知浏览：关键词：

挪移端许许多多的列表的制作办法

前言

本系列文章的CSS局部,将全部采纳SASS语法撰写.要是您不会SASS,倡议浏览相干教程,包含自己的《CSS预编译技术之SASS学习经验小结》教程.
本系列文章将援用reset.scss和mixin.scss两个根基文档,用于重置阅读器样式,和根基的一些SASS代码块.因为代码较长,请参阅《挪移端系列博文根基reset.scss和mixin.scss》猎取.

自己水平有限,能力个别,因而文章中将不成以免的有差错和漏掉.因而,欢送大家在文章里评价留言.我将在首先工夫内回应.感谢大家.

最简略的列表

第一,来一个最简略的列表.我们要实现的结果,如下图所示:

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

html代码

list 1

这是一个列表1
这是一个列表2
这是一个列表3
这是一个列表4
这是一个列表5
这是一个列表6
这是一个列表7
这是一个列表8

这里需要注明的是,挪移端一定需要加上这段代码.不然挪移端的阅读器会当做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相干教程.不要觉得难,一个小时保障学会,两天能玩的非常溜.

还是一个简略的列表

第一,我们来看结果图:

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

不要蹊跷怪僻,许多时候,设计师这样设计,是有其本人的设计理念的.作为前端人员,我们要忠实的复原设计师设计的一些小的细节.即使你以为这有点画蛇添足.呵呵.

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列表的制作办法的细致内容，更多请关注百分百源码网其它相干文章！

打赏