項目清單 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>
▼顯示結果如下:
1.香蕉
2.芭樂
3.鳳梨
項目清單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>