項目清單 HTML 語法
基本上項目清單的 HTML 語法有兩種，一類是 <ul> 也就是沒有數字排序的清單(Unordered List)，另一種就是 <ol> 有數字編號排序的清單(Ordered List)。
<ol> 或 <ul> 架構裡面會包含數個 <li> 每個 <li> 和 </li> 之間才是我們要條列的項目。
<ul> 無編號清單
▼以下是沒有數字排序的 <ul> 清單
<ul> <li>香蕉</li> <li>芭樂</li> <li>鳳梨</li> </ul>
▼顯示結果如下：
- 香蕉
- 芭樂
- 鳳梨
<ol> 有編號清單
▼如果要建立有數字編號的清單，語法如下：
<ol> <li>香蕉</li> <li>芭樂</li> <li>鳳梨</li> </ol>
▼顯示結果如下：
- 香蕉
- 芭樂
- 鳳梨
項目清單CSS屬性 (list)
上一段的 HTML 語法有說到，<ul> 是無數字編號清單，而 <ol> 是有數字編號清單，但是兩者都可以透過套用 CSS 屬性改變為有數字編號清單或無數字編號清單。
<ul> 或 <ol> 都可套用以下幾種屬性
- list-style-type (前面的項目符號樣式)
- list-style-position (換行模式)
- list-style-image (用圖片當作項目符號)
- list-style (若宣告為 list-style:none; 則所有項目符號會消失)
list-style-type
<ul style="list-style-type: decimal;"> <li>老虎</li> <li>大象</li> <li>小豬</li> </ul>
以上將顯示為：
- 老虎
- 大象
- 小豬
list-style-type 用來表示清單前面的符號是哪一種，有以下幾種值：
| none | 沒有符號 沒有符號 |
| decimal | 1. 蟋蟀 2. 烏龜 |
| disc | • 黑點 • 嘿嘿 |
| circle | ◦ 空心圓圈 ◦ 空空 |
| square | ▪ 實心方塊 ▪ 實心的 |
| upper-alpha | A. 大寫英文字母 B. 英文 |
| lower-alpha | a. 小寫英文字母 b. 小小的 |
| upper-roman | I. 大寫羅馬字 II. 大寫羅馬字 |
| lower-roman | i. 小寫羅馬字 ii. 小寫羅馬字 |
list-style-position
list-style-position 用來表示清單項目裡面換行時，要對齊上一行的第一個字 (outside) 還是對齊前面的項目符號 (inside)。若沒有設定，預設值為 outside。
<ul style='list-style-position:inside;'> <li>大象<br>鼻子很長 <li>小豬還好 </ul>
以上將顯示為：
• 大象
鼻子很長
• 小豬還好
<ul style='list-style-position:outside;'> <li>大象<br>鼻子很長 <li>小豬還好 </ul>
以上將顯示為：
| • | 大象 |
| 鼻子很長 | |
| • | 小豬還好 |
list-style-image 以圖片作為標記符號
<ul style="list-style-image: url('圖片網址');">
<li>約克夏豬</li>
<li>黑豬</li>
<li>比利時豬</li>
</ul>
list-style
若宣告 list-style:none; 則會清除清單前面的項目符號。
<ul style="list-style: none"> <li>約克夏豬</li> <li>黑豬</li> <li>比利時豬</li> </ul>
清單架構/子項目
清單像其它的 HTML 語言一樣，可以用巢狀結構來實現子項目結構
<ol>
<li>哺乳類
<ul>
<li>大象</li>
<li>駱駝</li>
<li>狗</li>
</ul>
</li>
<li>爬蟲類
<ul>
<li>蛇</li>
<li>蜥蜴</li>
</ul>
</li>
<li>鳥類</li>
</ol>
上方語法將呈現為：
- 哺乳類
- 大象
- 駱駝
- 狗
- 爬蟲類
- 蛇
- 蜥蜴
- 鳥類
用項目清單製作選單
我們也可以用項目清單搭配 CSS 屬性來製作包含子項目的選單，如下：
範例：
CSS 的部分
<style>
nav {/*整個上方區塊*/
color: #F00;
min-width: 100%;
margin:0px;
background-color: #000;
}
nav ul {/*第一層選單區域*/
padding: 0;
margin: 0;
list-style: none;
position: relative;
margin:0px;
}
nav ul li {/*第一層選單項目*/
display: inline-block;
float: none;
white-space: nowrap;
}
nav ul li a {/*最上層選單樣式*/
display: block;
padding: 0 10px;
color: #eee;
font-size: 20px;
line-height: 30px;
text-decoration: none;
background-color: #000;
}
nav ul li ul a {/*第一層子選單樣式*/
background-color: #0053D9;
}
nav ul li ul li ul a {/*第二層子選單樣式*/
background-color: #0097D8;
}
nav a:hover {/*整個選單連結滑鼠移上去時的樣式*/
color: #FFF;
background-color: #555;
transition: all .2s ease;
}
nav ul ul {/*第一層子選單展開*/
position: absolute;
transition-property: transform;
transition-duration: 20ms;
transition-timing-function: ease-in;
transition-delay: 200ms;
transform: scale(1,0);
transform-origin: top center;
}
nav ul li:hover>ul {/*選單滑鼠移上去的樣式變化*/
/*display: inherit;*/
transition: all 300ms ease;
transform: scale(1,1);
}
nav ul ul li {/*第一層子選單的樣式*/
min-width: 170px;
display: list-item;
position: relative;
}
nav ul ul ul {/*第二層子選單的區塊樣式*/
position: absolute;
top: 0;
left: 100%;
}
</style>
HTML 的部分
<nav> <ul> <li><a href="#">首頁</a></li> <li><a href="#">關於</a> <ul> <li><a href="#">我們的團隊</a></li> </ul> </li> <li><a href="#">服務項目</a> <ul> <li><a href="#">動物認養</a> <ul> <li><a href="#">大象</a></li> <li><a href="#">老虎</a></li> <li><a href="#">長頸鹿</a></li> <li><a href="#">羊駝</a></li> </ul> </li> <li><a href="#">動物救助</a> <ul> <li><a href="#">野生動物</a></li> <li><a href="#">溫馴動物</a></li> </ul> </li> </ul> </li> <li><a href="#">產品</a> <ul> <li><a href="#">環保餐具</a></li> <li><a href="#">樹苗</a></li> </ul> </li> <li><a href="#">聯絡方式</a> <ul> <li><a href="#">實地拜訪</a></li> <li><a href="#">線上對談</a></li> </ul> </li> </ul> </nav>