iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
1

這次來介紹清單的寫法,而清單又分成有編號的和沒有編號的。下面就分別來做介紹吧!

有序清單

有序清單英文是 Ordered List,他的標籤就是縮寫 <ol>,而清單的項目則是 list 的前兩個字母 <li>,例如

<ol>
    <li>項目一</li>
    <li>項目二</li>
    <li>項目三</li>
</ol>

項目就會自動編上號碼
https://ithelp.ithome.com.tw/upload/images/20190929/201209595tcnTCFg4v.jpg

無序清單

無序清單英文是 Unordered List,他的標籤則是縮寫 <ul>,而清單的項目也和有序清單一樣是 list 的前兩個字母 <li>,例如

<ul>
    <li>項目一</li>
    <li>項目二</li>
    <li>項目三</li>
</ul>

每個項目前面就會加上項目符號
https://ithelp.ithome.com.tw/upload/images/20190929/20120959AmXdev7u8s.jpg


至於清單項目前面的數字或是項目符號也可以利用 style 改變樣式
例如 :

<ol style="list-style-type:lower-alpha;">
    <li>項目一</li>
    <li>項目二</li>
    <li>項目三</li>
</ol>

把數字換成英文字母
https://ithelp.ithome.com.tw/upload/images/20190929/20120959zqKZy5n4n9.jpg

<ul style="list-style-type:circle;">
    <li>項目一</li>
    <li>項目二</li>
    <li>項目三</li>
</ul>

實心圓換成空心圓
https://ithelp.ithome.com.tw/upload/images/20190929/20120959vRSQNwJEfi.jpg

樣式可以參考這個網頁
https://www.webtech.tw/info.php?tid=CSS_list-style-type_%E5%88%97%E8%A1%A8%E9%96%8B%E9%A0%AD%E9%A1%AF%E7%A4%BA%E7%AC%A6%E8%99%9F


上一篇
Day12-HTML(8) - 元件基本特性分類
下一篇
Day14-HTML(10) - 表格
系列文
~網頁入門~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言