這篇文章主要介紹了移動端html5列表怎么弄，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

在林周等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供成都網(wǎng)站制作、成都網(wǎng)站設計 網(wǎng)站設計制作按需定制開發(fā),公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,品牌網(wǎng)站制作,全網(wǎng)營銷推廣,成都外貿(mào)網(wǎng)站建設,林周網(wǎng)站建設費用合理。

前言

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

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

最簡單的列表

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

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

html代碼

    

        
這是一個列表1
        
這是一個列表2
        
這是一個列表3
        
這是一個列表4
        
這是一個列表5
        
這是一個列表6
        
這是一個列表7
        
這是一個列表8
    

這里需要說明的是,移動端一定需要加上這段代碼.否則移動端的瀏覽器會當成PC版的網(wǎng)頁,是可以伸縮的.

建議,服務器,數(shù)據(jù)庫,后端程序,前臺html以及CSS都全部統(tǒng)一為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;}
    }
}
這里的單位全部使用的是,我們里面,已經(jīng)將的字體大小設置為了,也就相當于正常情況下的10px.也就是說,上面的相當于.至于為什么這么寫,請到本文開頭的鏈接里面查看前面我寫的文章中的解釋. 
不會sass的,請先閱讀sass相關教程.不要覺得難,一個小時保證學會,兩天能玩的非常溜.

還是一個簡單的列表

首先,我們來看效果圖:

這個列表咋一看,和上面的列表沒有任何區(qū)別.但是,我們仔細看一下,會發(fā)現(xiàn)下面的線條是不頂頭的.

不要奇怪,很多時候,設計師這樣設計,是有其自己的設計理念的.作為前端人員,我們要忠實的還原設計師設計的一些小的細節(jié).即便你認為這有點多此一舉.呵呵.

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列表怎么弄”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!