溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“移動端html5列表如何弄”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“移動端html5列表如何弄”文章吧。
首先,來一個最簡單的列表.我們要實(shí)現(xiàn)的效果,如下圖所示:
如上所示,我們要實(shí)現(xiàn)的就是這樣簡單的列表.這個沒有絲毫的難度.
<!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="">這是一個列表1</a></li> <li><a href="">這是一個列表2</a></li> <li><a href="">這是一個列表3</a></li> <li><a href="">這是一個列表4</a></li> <li><a href="">這是一個列表5</a></li> <li><a href="">這是一個列表6</a></li> <li><a href="">這是一個列表7</a></li> <li><a href="">這是一個列表8</a></li> </ul></p></body></html>
這里需要說明的是,移動端一定需要加上<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />這段代碼.否則移動端的瀏覽器會當(dāng)成PC版的網(wǎng)頁,是可以伸縮的.
建議,服務(wù)器,數(shù)據(jù)庫,后端程序,前臺html以及CSS都全部統(tǒng)一為utf-8編碼.避免因?yàn)榫幋a造成亂碼的情況.
.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.也就是說,上面的相當(dāng)于.至于為什么這么寫,請到本文開頭的鏈接里面查看前面我寫的文章中的解釋.
不會sass的,請先閱讀sass相關(guān)教程.不要覺得難,一個小時保證學(xué)會,兩天能玩的非常溜.首先,我們來看效果圖:
這個列表咋一看,和上面的列表沒有任何區(qū)別.但是,我們仔細(xì)看一下,會發(fā)現(xiàn)下面的線條是不頂頭的.
不要奇怪,很多時候,設(shè)計(jì)師這樣設(shè)計(jì),是有其自己的設(shè)計(jì)理念的.作為前端人員,我們要忠實(shí)的還原設(shè)計(jì)師設(shè)計(jì)的一些小的細(xì)節(jié).即便你認(rèn)為這有點(diǎn)多此一舉.呵呵.
html代碼,和第一個示例完全一樣.這里不再重復(fù)代碼
.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)于“移動端html5列表如何弄”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼