?css設(shè)置無序列表的方法

這篇文章主要介紹css設(shè)置無序列表的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)東麗,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

css怎么樣設(shè)置無序列表的樣式你知道嗎？這里有無序列表的詳細(xì)應(yīng)用，去掉這些圖標(biāo)之類的，還介紹了去掉小圓點(diǎn)給添加的圖片的介紹，大家可以自己試試看?，F(xiàn)在就讓我們一起來看看這篇文章吧

首先我們先來看看無序列表：

  • 我們都知道無序列表通常都是使用小圓點(diǎn)代替的，但是有些時(shí)候用小圓點(diǎn)不好看，為了增加美觀性，在css樣式中有幾種樣式設(shè)計(jì)的方法第一種：當(dāng)然是無序列表中的默認(rèn)小圓點(diǎn)

  • 第二種：是把小圓點(diǎn)改為小方塊顯示

  • 第三種：是把小圓點(diǎn)改為空心圓顯示

  • 第四種：是把小圓點(diǎn)給去掉，這個(gè)應(yīng)該是比較常用的。

  • 第五種：也是不太常用的，就是把無序列表編程有序列表的方法，前面加數(shù)字

現(xiàn)在我們來看看關(guān)于css這五種樣式的完整代碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>創(chuàng)新互聯(lián)</title>
<style type="text/css">
.zhe1{list-style-type:disc;}
.zhe2{list-style-type:square;}
.zhe3{list-style-type:circle;}
.zhe4{list-style-type:none;}
.zhe5{list-style-type:decimal;}
</style>
</head>
<body>
<ul>
<li class="zhe1">我是默認(rèn)小圓點(diǎn)</li>
<li class="zhe2">我是小方塊</li>
<li class="zhe3">我是空心圓</li>
<li class="zhe4">我是沒有標(biāo)記的</li>
<li class="zhe5">我是要有序列表</li>
</ul>
</body>
</html>

這是一個(gè)比較簡(jiǎn)單的代碼了，我們先來看看在瀏覽器中的顯示效果吧：

?css設(shè)置無序列表的方法

這五種效果全部顯示出來了。是不是很簡(jiǎn)單呢。（想看更多css樣式的知識(shí)，就到創(chuàng)新互聯(lián)css參考手冊(cè)欄目學(xué)習(xí)）

現(xiàn)在我們來說說css對(duì)列表樣式的總結(jié)：

  • list-style-image：url圖片地址 屬性使用圖像來替換列表項(xiàng)的標(biāo)記；

  • list-style-position 屬性設(shè)置在何處放置列表項(xiàng)標(biāo)記；還有一個(gè)inside的值：放在文本以內(nèi)。

  • list-style 復(fù)合寫法

這個(gè)的最后一種是現(xiàn)在比較常用的，如果你不想寫太多代碼的話，可以使用這種符合寫法，簡(jiǎn)單的完成這些我們看個(gè)實(shí)例：

<style type="text/css">
.zhe1,.zhe2,.zhe3,.zhe4,.zhe5{list-style:none;}
</style>

這個(gè)css樣式，加上這個(gè)，就能去掉那些不想要的東西了，還能寫入別的屬性，就這個(gè)我們來看看效果吧：

?css設(shè)置無序列表的方法

效果就是很明顯了是不是，我們就這樣把這些列表都去掉了，當(dāng)然這只是最基礎(chǔ)的符合寫法，還能寫入別的屬性樣式，這樣才能顯示節(jié)省更多的時(shí)間。

以上是css設(shè)置無序列表的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：?css設(shè)置無序列表的方法
瀏覽地址：http://muchs.cn/article28/gedocp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站制作、網(wǎng)站營(yíng)銷、手機(jī)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)