这篇文章主要介绍使用HTML5如何制作移动端各种各样的列表,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
上面两章,我们做了一些普通的列表.而在移动端H5中,我们经常会做一行一个小图标的列表.这个DEMO,我们就来制作这种类型的列表.示例如下图所示.
这里我就不使用小图标了,画一个圆圈圈代替一下.
<!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=""><i class="ico ico_1"></i>这是一个列表1</a></li> <li><a href=""><i class="ico ico_2"></i>这是一个列表2</a></li> <li><a href=""><i class="ico ico_3"></i>这是一个列表3</a></li> <li><a href=""><i class="ico ico_4"></i>这是一个列表4</a></li> <li><a href=""><i class="ico ico_5"></i>这是一个列表5</a></li> <li><a href=""><i class="ico ico_6"></i>这是一个列表6</a></li> <li><a href=""><i class="ico ico_7"></i>这是一个列表7</a></li> <li><a href=""><i class="ico ico_8"></i>这是一个列表8</a></li> </ul></p></body></html>
这里的html代码和前面的例子就不太一样了.这里我们加了一个i
标签来制作图标.给每一个i
标签加上不同的class
是为了订制不同的图标.
.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-left: 3rem; position: relative; } .ico { display: block;width: 2.4rem;height: 2.4rem;position: absolute;left: 0;top: .8rem; background: #f60;border-radius: 50%; } } }
在这个例子当中,我们采用了定位布局的方式.如果您对定位布局不是很了解,请阅读我的博文《Css 详细解读定位属性 position 以及参数》.
此外,由于每个图标都得不一样,所以我在html中给每一个i
标签都加上了不同的class方便在CSS中调用不同的图标图片.也就是说,我们使用背景图片的方式来制作图标.
SASS是支持循环输出的,因此,只需要一个循环代码,就可以将所有的图标都制作OK了.这里呢,也需要使用到background-size
来处理图标,关于background-size
的使用,本文的上一章中有阐述.这里不再赘述.
SASS循环,建议在sass入门 - sass教程 官方网站查看实现方法.这里不再过多的阐述了.
首先,我们来看效果图:
这个列表和上面的列表乍一看没什么不同.但仔细看就会发现,这个分割线是和文字对齐,而不是和图标对齐的.
不要怪我事儿逼,设计师就是这么设计的.如果没有做到的话,设计师很生气.
html代码和上面的DEMO是一致的.这里不再重复
话不多说,调整css
.list_1 { ul {padding-left: 4.6rem;} li { border-bottom: 1px solid #ddd; padding-right: 1.6rem; position: relative; 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; } .ico { display: block;width: 2.4rem;height: 2.4rem;position: absolute;left: -3rem;top: .8rem; background: #f60;border-radius: 50%; } } }
原来在a
上的左填充,给加到ul
上面去了.这样,就可以压缩li
来达到边线缩小的效果.
而在图标的处理上,left
值采用了负数,给移到ul
的填充上面去.就达到设计效果了
以上是“使用HTML5如何制作移动端各种各样的列表”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。