移動(dòng)端html5列表如何弄

這篇“移動(dòng)端html5列表如何弄”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“移動(dòng)端html5列表如何弄”文章吧。

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、永勝ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的永勝網(wǎng)站制作公司

最簡(jiǎn)單的列表

首先,來(lái)一個(gè)最簡(jiǎn)單的列表.我們要實(shí)現(xiàn)的效果,如下圖所示:

移動(dòng)端html5列表如何弄

如上所示,我們要實(shí)現(xiàn)的就是這樣簡(jiǎn)單的列表.這個(gè)沒(méi)有絲毫的難度.

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="">這是一個(gè)列表1</a></li>
        <li><a href="">這是一個(gè)列表2</a></li>
        <li><a href="">這是一個(gè)列表3</a></li>
        <li><a href="">這是一個(gè)列表4</a></li>
        <li><a href="">這是一個(gè)列表5</a></li>
        <li><a href="">這是一個(gè)列表6</a></li>
        <li><a href="">這是一個(gè)列表7</a></li>
        <li><a href="">這是一個(gè)列表8</a></li>
    </ul></p></body></html>

這里需要說(shuō)明的是,移動(dòng)端一定需要加上<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />這段代碼.否則移動(dòng)端的瀏覽器會(huì)當(dāng)成PC版的網(wǎng)頁(yè),是可以伸縮的.

建議,服務(wù)器,數(shù)據(jù)庫(kù),后端程序,前臺(tái)html以及CSS都全部統(tǒng)一為utf-8編碼.避免因?yàn)榫幋a造成亂碼的情況.

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)將的字體大小設(shè)置為了,也就相當(dāng)于正常情況下的10px.也就是說(shuō),上面的相當(dāng)于.至于為什么這么寫,請(qǐng)到本文開(kāi)頭的鏈接里面查看前面我寫的文章中的解釋. 
不會(huì)sass的,請(qǐng)先閱讀sass相關(guān)教程.不要覺(jué)得難,一個(gè)小時(shí)保證學(xué)會(huì),兩天能玩的非常溜.

還是一個(gè)簡(jiǎn)單的列表

首先,我們來(lái)看效果圖:

移動(dòng)端html5列表如何弄

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

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

html代碼,和第一個(gè)示例完全一樣.這里不再重復(fù)代碼

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;}
    }
}

其實(shí),也只是稍微的轉(zhuǎn)換一下思路.將在demo1里面的加載li上的padding值,分配到ul和li上,就可以了.

以上就是關(guān)于“移動(dòng)端html5列表如何弄”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：移動(dòng)端html5列表如何弄
文章鏈接：http://bm7419.com/article26/pssjjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、網(wǎng)站營(yíng)銷、商城網(wǎng)站、App設(shè)計(jì)、Google、標(biāo)簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容