css怎麼樣設定無序列表的樣式你知道嗎?這裡有無序列表的詳細應用,去掉這些圖示之類的,還介紹了去掉小圓點給新增的圖片的介紹,大家可以自己試試看。現在就讓我們一起來看看這篇文章吧
首先我們先來看看無序列表:
我們都知道無序列表通常都是用小圓點代替的,但是有些時候用小圓點不好看,為了增加美觀性,在css樣式中有幾種樣式設計的方法第一種:當然是無序列表中的默認小圓點
第二種:是把小圓點改為小方塊顯示
第三種:是把小圓點改為空心圓顯示
第四種:是把小圓點給去掉,這個應該是比較常用的。
第五種:也是不太常用的,就是把無序列表編程有序列表的方法,前面加數字
現在我們來看看關於css這五種樣式的完整程式碼:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</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樣式的知識,就到PHP中文網css參考手冊欄位學習)
現在我們來說說css對列表樣式的總結:
list-style-image:url圖片位址屬性使用圖像來取代清單項目的標記;
list-style-position 屬性設定在何處放置清單項目標記;還有一個inside的值:放在文字以內。
list-style 複合寫法
這個的最後一種是現在比較常用的,如果你不想寫太多程式碼的話,可以使用這種符合寫法,簡單的完成這些我們看個實例:
<style type="text/css"> .zhe1,.zhe2,.zhe3,.zhe4,.zhe5{list-style:none;} </style>
這個css樣式,加上這個,就能去掉那些不想要的東西了,還能寫入別的屬性,就這個讓我們來看看效果吧:
效果就是很明顯了是不是,我們就這樣把這些清單都去掉了,當然這只是最基礎的符合寫法,還能寫入別的屬性樣式,這樣才能顯示節省更多的時間。
好了,以上就是這篇關於css列表樣式的總結了。以問題的可以在下方提問。
【小編推薦】
html中的字元間距怎麼設定? css樣式設定文字對齊方式總結
以上是怎麼設定無序列表? css的列表樣式總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!