移動端H5各種各樣的列表的制作方法(三) by FungLeo
移動端H5各種各樣的列表的制作方法(三) by FungLeo
前情回顧
在上一篇博文《移動端各種各樣的列表的制作方法(二)》中,我們再通過兩個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> <div 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> </div> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
這里的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%; } } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
在這個例子當中,我們采用了定位布局的方式.如果您對定位布局不是很了解,請閱讀我的博文《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%; } } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
原來在a上的左填充,給加到ul上面去了.這樣,就可以壓縮li來達到邊線縮小的效果.
而在圖標的處理上,left值采用了負數,給移到ul的填充上面去.就達到設計效果了.
小結
本章沒有着重去講SASS的循環如何處理,這些都是技術性的問題,參考一下SASS的教程,很快就能學會的.
我這里假設是使用背景圖片的方法,來實現小圖標的.當然,現在有很多種方法來實現小圖標的制作,比如CSS圖標,比如字體圖標.這些實現方法各有優劣,不是我今天考慮的問題.
本章着重講了以下幾點:
- 定位布局.這一點很重要.
- 靈活的使用各種元素,使用內填充或者外填充,來實現你想要的效果.
- 使用不同的class名,來實現不同的小圖標.
附錄
移動端H5的一些基本知識點總結
sass入門 - sass教程 官方網站
CSS預編譯技術之SASS學習經驗小結
移動端系列博文基礎reset.scss和mixin.scss
移動端各種各樣的列表的制作方法(一)
移動端各種各樣的列表的制作方法(二)
本文由FungLeo原創,轉載請保留版權申明,以及首發地址: http://blog.csdn.net/FungLeo/article/details/50888014
- 頂
- 0
- 踩
- 0