H5移动端各种各样的列表的制作方法详解(三)
H5移动端各种各样的列表的制作方法(三)
前情回顾
在上一篇博文《移动端各种各样的列表的制作方法(二)》中,我们再通过两个DEMO,演示了一下在移动端H5中更多需求的列表制作.不过,看起来,好像还是蛮简单的.这一章,接着深入.
如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.
带小图标的列表
上面两章,我们做了一些普通的列表.而在移动端H5中,我们经常会做一行一个小图标的列表.这个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=""><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是为了订制不同的图标.
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-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
SASS代码
.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的填充上面去.就达到设计效果了.
小结
本章没有着重去讲SASS的循环如何处理,这些都是技术性的问题,参考一下SASS的教程,很快就能学会的.
我这里假设是使用背景图片的方法,来实现小图标的.当然,现在有很多种方法来实现小图标的制作,比如CSS图标,比如字体图标.这些实现方法各有优劣,不是我今天考虑的问题.
本章着重讲了以下几点:
定位布局.这一点很重要.
灵活的使用各种元素,使用内填充或者外填充,来实现你想要的效果.
使用不同的class名,来实现不同的小图标.
Atas ialah kandungan terperinci H5移动端各种各样的列表的制作方法详解(三) . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1381
52
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
