本系列文章的CSS部分,將全部采用SASS語法撰寫.如果您不會SASS,建議閱讀相關教程,包括本人的《CSS預編譯技術之SASS學習經驗小結》教程.
本系列文章將引用reset.scss和mixin.scss兩個基礎文檔,用于重置瀏覽器樣式,和基礎的一些SASS代碼塊.由于代碼較長,請參閱《移動端系列博文基礎reset.scss和mixin.scss》獲取.

本人水平有限,能力一般,因此文章中將不可避免的有錯誤和遺漏.因此,歡迎大家在文章里評論留言.我將在第一時間內回應.謝謝大家.

首先,來一個最簡單的列表.我們要實現的效果,如下圖所示:

如上所示,我們要實現的就是這樣簡單的列表.這個沒有絲毫的難度.

 !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 >
這里需要說明的是,移動端一定需要加上 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相關教程.不要覺得難,一個小時保證學會,兩天能玩的非常溜.
還是一個簡單的列表
首先,我們來看效果圖:
這個列表咋一看,和上面的列表沒有任何區別.但是,我們仔細看一下,會發現下面的線條是不頂頭的.
不要奇怪,很多時候,設計師這樣設計,是有其自己的設計理念的.作為前端人員,我們要忠實的還原設計師設計的一些小的細節.即便你認為這有點多此一舉.呵呵.
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列表的制作方法的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。