iT邦幫忙

2025 iThome 鐵人賽

DAY 7
0

今天介紹Html裡的列表,ul,ol,dl

ul無序列表,代表著列表的容器,而列表的內容以li來添加呈現,ul的列表內容呈現無序性
https://ithelp.ithome.com.tw/upload/images/20250921/20178696ZYiaoWnzky.png
https://ithelp.ithome.com.tw/upload/images/20250921/20178696L67jz2v8bi.png
ol為有序列表,同ul一樣代表著列表的容器,但是列表的內容有順序性
https://ithelp.ithome.com.tw/upload/images/20250921/20178696E7KyikDQZg.png
https://ithelp.ithome.com.tw/upload/images/20250921/20178696jFPL81WZ9o.png

dl表示著自訂列表,不同於ul和ol,dl通常用於對名詞的解釋及描述,dl是自訂列表的容器,dt是列表的內容,dd是對dt進行補充的內容
https://ithelp.ithome.com.tw/upload/images/20250921/20178696SdrrDnGFSU.png
https://ithelp.ithome.com.tw/upload/images/20250921/201786964eyLDMjlPe.png

列表之間可以再用列表實現巢狀
https://ithelp.ithome.com.tw/upload/images/20250921/20178696BvMuAN5JEX.png
https://ithelp.ithome.com.tw/upload/images/20250921/20178696smNXqDfrl1.png
reversed屬性,改變排列順序

https://ithelp.ithome.com.tw/upload/images/20250921/2017869688iHEfMZ61.png
https://ithelp.ithome.com.tw/upload/images/20250921/20178696KJNwBrGZgH.png
start屬性:改變初始數值(默認為一)
https://ithelp.ithome.com.tw/upload/images/20250921/20178696uIGBXm93ZS.png
https://ithelp.ithome.com.tw/upload/images/20250921/20178696q2vRUpVdym.png

透過css來對列表進行改變
list-style-type,透過這個可以改變ul及ol呈現的默認樣式(ul的黑色圓型及ol的123)
https://ithelp.ithome.com.tw/upload/images/20250921/20178696ZuBhp2WiAj.pnghttps://ithelp.ithome.com.tw/upload/images/20250921/20178696gPalCSifvQ.pnghttps://ithelp.ithome.com.tw/upload/images/20250921/20178696qkCTbR02fL.png
disc:黑色圓型,ul的默認樣式
circle:空心圓形
square:黑色方形
https://ithelp.ithome.com.tw/upload/images/20250921/20178696ItU1jUzcJA.png
https://ithelp.ithome.com.tw/upload/images/20250921/20178696xCzXoZXRqm.png
https://ithelp.ithome.com.tw/upload/images/20250921/20178696pPnG3Pgcsx.png

none清除樣式
decimal:數字,ol默認樣式
lower-greek:小寫希臘字母
lower-alpha:小寫英文字母
upper-alpha:大寫英文字母
upper-roman:大寫羅馬字母
lower-roman:小寫羅馬字母
https://ithelp.ithome.com.tw/upload/images/20250921/201786963PtrSSCwsy.png
https://ithelp.ithome.com.tw/upload/images/20250921/20178696mgjff73xWY.png


上一篇
DAY6 html表格
系列文
HTML&CSS30天修煉7
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言