這篇文章主要介紹css設置無序列表的方法,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)主要從事網(wǎng)站設計、成都做網(wǎng)站、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務東麗,十載網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:028-86922220
css怎么樣設置無序列表的樣式你知道嗎?這里有無序列表的詳細應用,去掉這些圖標之類的,還介紹了去掉小圓點給添加的圖片的介紹,大家可以自己試試看?,F(xiàn)在就讓我們一起來看看這篇文章吧
首先我們先來看看無序列表:
我們都知道無序列表通常都是使用小圓點代替的,但是有些時候用小圓點不好看,為了增加美觀性,在css樣式中有幾種樣式設計的方法第一種:當然是無序列表中的默認小圓點
第二種:是把小圓點改為小方塊顯示
第三種:是把小圓點改為空心圓顯示
第四種:是把小圓點給去掉,這個應該是比較常用的。
第五種:也是不太常用的,就是把無序列表編程有序列表的方法,前面加數(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">我是默認小圓點</li> <li class="zhe2">我是小方塊</li> <li class="zhe3">我是空心圓</li> <li class="zhe4">我是沒有標記的</li> <li class="zhe5">我是要有序列表</li> </ul> </body> </html>
這是一個比較簡單的代碼了,我們先來看看在瀏覽器中的顯示效果吧:
這五種效果全部顯示出來了。是不是很簡單呢。(想看更多css樣式的知識,就到創(chuàng)新互聯(lián)css參考手冊欄目學習)
現(xiàn)在我們來說說css對列表樣式的總結(jié):
list-style-image:url圖片地址 屬性使用圖像來替換列表項的標記;
list-style-position 屬性設置在何處放置列表項標記;還有一個inside的值:放在文本以內(nèi)。
list-style 復合寫法
這個的最后一種是現(xiàn)在比較常用的,如果你不想寫太多代碼的話,可以使用這種符合寫法,簡單的完成這些我們看個實例:
<style type="text/css"> .zhe1,.zhe2,.zhe3,.zhe4,.zhe5{list-style:none;} </style>
這個css樣式,加上這個,就能去掉那些不想要的東西了,還能寫入別的屬性,就這個我們來看看效果吧:
效果就是很明顯了是不是,我們就這樣把這些列表都去掉了,當然這只是最基礎的符合寫法,還能寫入別的屬性樣式,這樣才能顯示節(jié)省更多的時間。
以上是css設置無序列表的方法的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
名稱欄目:?css設置無序列表的方法
瀏覽地址:http://chinadenli.net/article28/gedocp.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供Google、網(wǎng)站制作、網(wǎng)站營銷、手機網(wǎng)站建設、全網(wǎng)營銷推廣、
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)