使用HTML5如何制作移動(dòng)端各種各樣的列表-創(chuàng)新互聯(lián)

這篇文章主要介紹使用HTML5如何制作移動(dòng)端各種各樣的列表，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司，為您提供成都網(wǎng)站建設(shè)、網(wǎng)站制作公司、網(wǎng)站營(yíng)銷推廣、網(wǎng)站開發(fā)設(shè)計(jì)，對(duì)服務(wù)建筑動(dòng)畫等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！

H5移動(dòng)端各種各樣的列表的制作方法

帶小圖標(biāo)的列表

上面兩章,我們做了一些普通的列表.而在移動(dòng)端H5中,我們經(jīng)常會(huì)做一行一個(gè)小圖標(biāo)的列表.這個(gè)DEMO,我們就來(lái)制作這種類型的列表.示例如下圖所示.

使用HTML5如何制作移動(dòng)端各種各樣的列表

這里我就不使用小圖標(biāo)了,畫一個(gè)圓圈圈代替一下.

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>這是一個(gè)列表1</a></li>
        <li><a href=""><i class="ico ico_2"></i>這是一個(gè)列表2</a></li>
        <li><a href=""><i class="ico ico_3"></i>這是一個(gè)列表3</a></li>
        <li><a href=""><i class="ico ico_4"></i>這是一個(gè)列表4</a></li>
        <li><a href=""><i class="ico ico_5"></i>這是一個(gè)列表5</a></li>
        <li><a href=""><i class="ico ico_6"></i>這是一個(gè)列表6</a></li>
        <li><a href=""><i class="ico ico_7"></i>這是一個(gè)列表7</a></li>
        <li><a href=""><i class="ico ico_8"></i>這是一個(gè)列表8</a></li>
    </ul></p></body></html>

這里的html代碼和前面的例子就不太一樣了.這里我們加了一個(gè)i標(biāo)簽來(lái)制作圖標(biāo).給每一個(gè)i標(biāo)簽加上不同的class是為了訂制不同的圖標(biāo).

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

在這個(gè)例子當(dāng)中,我們采用了定位布局的方式.如果您對(duì)定位布局不是很了解,請(qǐng)閱讀我的博文《Css 詳細(xì)解讀定位屬性 position 以及參數(shù)》.

此外,由于每個(gè)圖標(biāo)都得不一樣,所以我在html中給每一個(gè)i標(biāo)簽都加上了不同的class方便在CSS中調(diào)用不同的圖標(biāo)圖片.也就是說(shuō),我們使用背景圖片的方式來(lái)制作圖標(biāo).

SASS是支持循環(huán)輸出的,因此,只需要一個(gè)循環(huán)代碼,就可以將所有的圖標(biāo)都制作OK了.這里呢,也需要使用到background-size來(lái)處理圖標(biāo),關(guān)于background-size的使用,本文的上一章中有闡述.這里不再贅述.

SASS循環(huán),建議在sass入門 - sass教程 官方網(wǎng)站查看實(shí)現(xiàn)方法.這里不再過(guò)多的闡述了.

帶圖標(biāo)的列表,但是分割線要和文字對(duì)齊.

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

使用HTML5如何制作移動(dòng)端各種各樣的列表

這個(gè)列表和上面的列表乍一看沒(méi)什么不同.但仔細(xì)看就會(huì)發(fā)現(xiàn),這個(gè)分割線是和文字對(duì)齊,而不是和圖標(biāo)對(duì)齊的.

不要怪我事兒逼,設(shè)計(jì)師就是這么設(shè)計(jì)的.如果沒(méi)有做到的話,設(shè)計(jì)師很生氣.

html代碼和上面的DEMO是一致的.這里不再重復(fù)

話不多說(shuō),調(diào)整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%;        
        }
    }
}

原來(lái)在a上的左填充,給加到ul上面去了.這樣,就可以壓縮li來(lái)達(dá)到邊線縮小的效果.
而在圖標(biāo)的處理上,left值采用了負(fù)數(shù),給移到ul的填充上面去.就達(dá)到設(shè)計(jì)效果了

以上是“使用HTML5如何制作移動(dòng)端各種各樣的列表”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：使用HTML5如何制作移動(dòng)端各種各樣的列表-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://muchs.cn/article12/egedc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、App開發(fā)、虛擬主機(jī)、營(yíng)銷型網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站維護(hù)

廣告

聲明：本網(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)

成都app開發(fā)公司