CSS / HTML 項目清單 list, ul, ol, li

項目清單 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>

以上將顯示為:

  1. 老虎
  2. 大象
  3. 小豬

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>