您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“CSS如何用list-style屬性控制li標(biāo)簽樣式”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“CSS如何用list-style屬性控制li標(biāo)簽樣式”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識(shí)吧。
list_style屬性用于修改列表的屬性
格式如下:
list_style:列表項(xiàng)標(biāo)記類型 列表項(xiàng)標(biāo)記的位置 列表項(xiàng)標(biāo)記;
也可以單獨(dú)設(shè)置列表項(xiàng)標(biāo)記:
list-style-type用于設(shè)置列表項(xiàng)類型:
默認(rèn)值為disc為實(shí)心圓,
常用值:none空
circle空心圓
square實(shí)心方塊
decimal數(shù)字
lower-latin小寫拉丁字母a,b,c.....
upper-latin大寫字母A,B,C....
list-style-position用于設(shè)這列表項(xiàng)位置:
默認(rèn)值outside表示在li標(biāo)簽外部,這是對(duì)li添加邊框border:1px solid red;可以看到標(biāo)記的位置。
inside表示標(biāo)記在li標(biāo)簽里面,同樣添加邊框時(shí)可以清晰地看到。
list-style-image用于設(shè)置使用圖像替換列表項(xiàng)標(biāo)記:
默認(rèn)值:none
可選值:URL ,格式為url("url地址");
舉例:
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標(biāo)題文檔</title> <style type="text/css"> ul { border:1px solid red; } li{ border:1px solid red; list-style:disc outside url(news_list.gif); list-style-position:5px; } </style> </head> <ul> <li>你好</li> <li>我好</li> </ul> <body> </body> </html>
讀到這里,這篇“CSS如何用list-style屬性控制li標(biāo)簽樣式”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。