小編給大家分享一下css怎樣設(shè)置li的樣式，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)專注于臨朐網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供臨朐營(yíng)銷型網(wǎng)站建設(shè)，臨朐網(wǎng)站制作、臨朐網(wǎng)頁(yè)設(shè)計(jì)、臨朐網(wǎng)站官網(wǎng)定制、小程序定制開(kāi)發(fā)服務(wù)，打造臨朐網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供臨朐網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

css設(shè)置li樣式的方法：1、通過(guò)list-style-type屬性定義li列表的項(xiàng)目符號(hào)；2、通過(guò)list-style-image屬性實(shí)現(xiàn)使用圖片代替項(xiàng)目符號(hào)；3、通過(guò)list-style屬性綜合設(shè)置li樣式即可。

li標(biāo)簽?zāi)J(rèn)樣式是前面有一個(gè)小圓點(diǎn)或者是數(shù)字序號(hào)，那么怎樣改變li標(biāo)簽的默認(rèn)樣式呢？

css怎么設(shè)置li標(biāo)簽的樣式？

ul和li列表是使用CSS布局頁(yè)面時(shí)常用的元素。在CSS中，有專門控制列表表現(xiàn)的屬性，常用的有l(wèi)ist-style-type屬性、list-style-image屬性、list-style-position屬性和list-style屬性。

一、list-style-type屬性

list-style-type屬性是用來(lái)定義li列表的項(xiàng)目符號(hào)的，即列表前面的修飾。list-style-type屬性是一個(gè)可繼承的屬性。其語(yǔ)法結(jié)構(gòu)如下：（列舉一些常用的屬性值）

list-style-type: none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman

list-style-type屬性的屬性值有很多，在這里我們只是列舉了比較常用的幾個(gè)。

none：不使用項(xiàng)目符號(hào)。

disc：實(shí)心圓。

circle：空心圓。

square：實(shí)心方塊。

demical：阿拉伯?dāng)?shù)字。

lower-alpha：小寫英文字母。

upper-alpha：大寫英文字母。

lower-roman：小寫羅馬數(shù)字。

upper-roman：大寫羅馬數(shù)字。

使用list-style-type屬性的示例代碼如下：

li{
    list-style-type:square;
}

    
這里是列表內(nèi)容
    
這里是列表內(nèi)容
    
這里是列表內(nèi)容

二、list-style-image屬性

list-style-image屬性用來(lái)定義使用圖片代替項(xiàng)目符號(hào)。它也是一個(gè)可繼承屬性，其語(yǔ)法結(jié)構(gòu)如下：

list-style-image:none/url

list-style-image屬性可以取兩個(gè)值：

none：沒(méi)有替換的圖片。

url：要替換圖片的路徑。

來(lái)看一段代碼：

li{
    list-style-image:url(images/bg03.gif);
}

    
這里是列表內(nèi)容
    
這里是列表內(nèi)容
    
這里是列表內(nèi)容

三、list-style-position屬性

list-style-position屬性，是用來(lái)定義項(xiàng)目符號(hào)在列表中顯示位置的屬性。它同樣是一個(gè)可繼承的屬性，語(yǔ)法結(jié)構(gòu)如下：

list-style-position:inside/outside

inside：項(xiàng)目符號(hào)放置在文本以內(nèi)。

outside：項(xiàng)目符號(hào)放置在文本以外。

使用list-style-position屬性的示例如下：

li{
    list-style-type:square;
    list-style-position:outside;
}

    
這里是使用list-style-position屬性值為outside的示例。請(qǐng)注意換行以后項(xiàng)目符號(hào)的位置。
    
這里是列表內(nèi)容
    
這里是列表內(nèi)容

再來(lái)看一下屬性值為inside的樣式。

li{
    list-style-type:square;
    list-style-position:inside;
}

    
這里是使用list-style-position屬性值為inside的示例。請(qǐng)注意換行以后項(xiàng)目符號(hào)的位置。
    
這里是列表內(nèi)容
    
這里是列表內(nèi)容

四、list-style屬性

list-style屬性是綜合設(shè)置li樣式的屬性，也是一個(gè)可以繼承的屬性，語(yǔ)法結(jié)構(gòu)如下：

li-style:list-style-type/list-style-image/list-style-position

各個(gè)值的位置可以交換。比如：

li{
    list-style:url(images/bg03.gif) inside;
}

    
這里是使用list-style屬性的示例。請(qǐng)注意換行以后項(xiàng)目符號(hào)的位置。
    
這里是列表內(nèi)容

以上是“css怎樣設(shè)置li的樣式”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)標(biāo)題：css怎樣設(shè)置li的樣式-創(chuàng)新互聯(lián)
標(biāo)題URL：http://weahome.cn/article/dsdced.html