iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 14
0
Modern Web

挑戰 CSS 30 天系列 第 14

day14_list-style-type

  • 分享至 

  • xImage
  •  

list-style-type 屬性是用來設定在清單中,每一條之前的記號要用什麼。其設定值為:
none (沒有)
disc (全黑圓圈)
circle (空心圓圈)
square (正方形)

One may also wish to use ordered character sets. Common ones are:
upper-latin (大寫拉丁文)
lower-latin (小寫拉丁文)
upper-roman (大寫羅馬文)
lower-roman (小寫羅馬文)
upper-alpha (大寫希臘文 )
lower-alpha (小寫希臘文 )

如以下範例:

<!DOCTYPE html>
<html>
<head>
  <title>CSS list-style-type</title>
  <meta charset="utf-8">
</head>
<body>
    <ul style='list-style-type:upper-latin;'> 
	  <li>大寫拉丁文項目 1</li> 
	  <li>大寫拉丁文項目 2</li> 
	</ul>
	<ul style='list-style-type:lower-latin;'> 
	  <li>小寫拉丁文項目 1</li> 
	  <li>小寫拉丁文項目 2</li> 
	</ul>
	<ul style='list-style-type:upper-roman;'> 
	  <li>大寫羅馬文項目 1</li> 
	  <li>大寫羅馬文項目 2</li> 
	</ul>
	<ul style='list-style-type:lower-roman;'> 
	  <li>小寫羅馬文項目 1</li> 
	  <li>小寫羅馬文項目 2</li> 
	</ul>
	<ul style='list-style-type:upper-alpha;'> 
	  <li>大寫希臘文項目 1</li> 
	  <li>大寫希臘文項目 2</li> 
	</ul>
	<ul style='list-style-type:lower-alpha;'> 
	  <li>小寫希臘文項目 1</li> 
	  <li>小寫希臘文項目 2</li> 
	</ul>
	<ul style='list-style-type:disc;'> 
	  <li>全黑圓圈項目 1</li> 
	  <li>全黑圓圈項目 2</li> 
	</ul>
	<ul style='list-style-type:circle;'> 
	  <li>空心圓圈項目 1</li> 
	  <li>空心圓圈項目 2</li> 
	</ul>
	<ul style='list-style-type:square;'> 
	  <li>正方形項目 1</li> 
	  <li>正方形項目 2</li> 
	</ul>
</body>
</html>

成果如下圖:
https://ithelp.ithome.com.tw/upload/images/20171217/20106496wAuOTbuItM.png


上一篇
day13_template 參考
下一篇
day15_list-style-position
系列文
挑戰 CSS 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言