完美世界小说txt下载,网络小说排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

list-style樣式屬性的使用示例-創(chuàng)新互聯(lián)

這篇文章主要介紹了list-style樣式屬性的使用示例，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站主要業(yè)務(wù)有網(wǎng)站營(yíng)銷策劃、成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、小程序定制開發(fā)、H5網(wǎng)站設(shè)計(jì)、程序開發(fā)等業(yè)務(wù)。一次合作終身朋友，是我們奉行的宗旨；我們不僅僅把客戶當(dāng)客戶，還把客戶視為我們的合作伙伴，在開展業(yè)務(wù)的過(guò)程中，公司還積累了豐富的行業(yè)經(jīng)驗(yàn)、全網(wǎng)整合營(yíng)銷推廣資源和合作伙伴關(guān)系資源，并逐漸建立起規(guī)范的客戶服務(wù)和保障體系。

一、list-style作用與用處

list-style是設(shè)置列表li的樣式。比如li前面為阿拉伯?dāng)?shù)字、圓點(diǎn)、實(shí)心圓、圖片、空心圓、小寫英文字母、大寫英文字母、傳統(tǒng)的亞美尼亞數(shù)字等。

二、語(yǔ)法

1、語(yǔ)法：

list-style : list-style-image || list-style-position || list-style-type

我們知道html語(yǔ)法規(guī)定li必須在ul或ol內(nèi)使用，那么對(duì)ul或ol可以設(shè)置list-style-image引入圖片作為li的前面布局素材。但通常div css布局時(shí)候不采用這種方法來(lái)設(shè)置li的前面圖片素材，通常對(duì)li直接設(shè)置背景圖片，這樣兼容更好，更易控制。

我們使用比較多是list-style的list-style-type屬性來(lái)設(shè)置li默認(rèn)前面樣式。

2、list-style-type的值與解釋

以下可以自己下來(lái)測(cè)試看看各種值效果。

參數(shù)：

list-style樣式屬性的使用示例

三、布局一般做法

通常在一個(gè)網(wǎng)頁(yè)布局時(shí)候開始CSS就要把ul ol li三者列表list-style樣式去掉，也是為了兼容各大瀏覽器，取消列表標(biāo)簽?zāi)J(rèn)list-style。

取消ul li ol的list-style樣式代碼：

ul,ol,li{list-style:none}

在網(wǎng)頁(yè)中要對(duì)列表前設(shè)置圓點(diǎn)，再通過(guò)對(duì)li設(shè)置Background背景圖片即可。

1、代碼如下：





ul li布局實(shí)例




php.cn-1
php.cn-2
php.cn-3

效果如下：

list-style樣式屬性的使用示例

2、解釋

以上去掉li ul ol三者的默認(rèn)list-style樣式，同時(shí)設(shè)置mragin和padding為0，字體大小為14px，行高為24px。為什么不用li自帶有l(wèi)ist-style-type設(shè)置圓點(diǎn)效果？

這是因?yàn)椴煌瑸g覽器有一定差距，避免圓點(diǎn)效果不同，距離左邊不同，所以統(tǒng)一取消list-style樣式，重新使用背景樣式來(lái)排版實(shí)現(xiàn)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享list-style樣式屬性的使用示例內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)建站，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

新聞標(biāo)題：list-style樣式屬性的使用示例-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)URL：http://fisionsoft.com.cn/article/dpcshd.html

新聞中心

其他資訊