您好,登錄后才能下訂單哦!
小編給大家分享一下css怎樣設(shè)置li的樣式,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
css設(shè)置li樣式的方法:1、通過list-style-type屬性定義li列表的項目符號;2、通過list-style-image屬性實(shí)現(xiàn)使用圖片代替項目符號;3、通過list-style屬性綜合設(shè)置li樣式即可。
li標(biāo)簽?zāi)J(rèn)樣式是前面有一個小圓點(diǎn)或者是數(shù)字序號,那么怎樣改變li標(biāo)簽的默認(rèn)樣式呢?
css怎么設(shè)置li標(biāo)簽的樣式?
ul和li列表是使用CSS布局頁面時常用的元素。在CSS中,有專門控制列表表現(xiàn)的屬性,常用的有l(wèi)ist-style-type屬性、list-style-image屬性、list-style-position屬性和list-style屬性。
一、list-style-type屬性
list-style-type屬性是用來定義li列表的項目符號的,即列表前面的修飾。list-style-type屬性是一個可繼承的屬性。其語法結(jié)構(gòu)如下:(列舉一些常用的屬性值)
list-style-type: none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman
list-style-type屬性的屬性值有很多,在這里我們只是列舉了比較常用的幾個。
none:不使用項目符號。
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; } <ul> <li>這里是列表內(nèi)容</li> <li>這里是列表內(nèi)容</li> <li>這里是列表內(nèi)容</li> </ul>
二、list-style-image屬性
list-style-image屬性用來定義使用圖片代替項目符號。它也是一個可繼承屬性,其語法結(jié)構(gòu)如下:
list-style-image:none/url
list-style-image屬性可以取兩個值:
none:沒有替換的圖片。
url:要替換圖片的路徑。
來看一段代碼:
li{ list-style-image:url(images/bg03.gif); } <ul> <li>這里是列表內(nèi)容</li> <li>這里是列表內(nèi)容</li> <li>這里是列表內(nèi)容</li> </ul>
三、list-style-position屬性
list-style-position屬性,是用來定義項目符號在列表中顯示位置的屬性。它同樣是一個可繼承的屬性,語法結(jié)構(gòu)如下:
list-style-position:inside/outside
inside:項目符號放置在文本以內(nèi)。
outside:項目符號放置在文本以外。
使用list-style-position屬性的示例如下:
li{ list-style-type:square; list-style-position:outside; } <ul> <li>這里是使用list-style-position屬性值為outside的示例。請注意換行以后項目符號的位置。</li> <li>這里是列表內(nèi)容</li> <li>這里是列表內(nèi)容</li> </ul>
再來看一下屬性值為inside的樣式。
li{ list-style-type:square; list-style-position:inside; } <ul> <li>這里是使用list-style-position屬性值為inside的示例。請注意換行以后項目符號的位置。</li> <li>這里是列表內(nèi)容</li> <li>這里是列表內(nèi)容</li> </ul>
四、list-style屬性
list-style屬性是綜合設(shè)置li樣式的屬性,也是一個可以繼承的屬性,語法結(jié)構(gòu)如下:
li-style:list-style-type/list-style-image/list-style-position
各個值的位置可以交換。比如:
li{ list-style:url(images/bg03.gif) inside; } <ul> <li>這里是使用list-style屬性的示例。請注意換行以后項目符號的位置。</li> <li>這里是列表內(nèi)容</li> </ul>
以上是“css怎樣設(shè)置li的樣式”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。