在這篇文章中,
會介紹如何用CSS語法去使用項目符號
跟一般網頁一樣
都會是用HTML做基本架構
加上CSS語法去控制表單清單的外觀
項目符號
list-style-type
這個屬性可以控制項目符號(marker)的樣式
也可以套用在<ol>
、<ul>
及<li>
標籤上
項目清單中可使用以下屬性值
none
disc(實心圓)
circle(空心圓)
square(實心方形)
編號清單中可使用下列屬性值
decimal 1 2 3
decimal-leading-zero 01 02 03
lower-alpha a b c
upper-alpha A B C
lower-roman i.ii.iii.
upper-roman I II III
使用圖片做項目符號
list-style-image
這個屬性可將圖片作為項目符號使用
值為影像路徑,如下方示意
list-style-image: url("images/icon.png")
項目符號位置
list-style-position
預設值中,清單會縮排到頁面內,
可用以上屬性去控制要在項目內還是項目外
屬性值如下:
outside
符號在文字區域左側(預設值)
inside
符號在文字方框內,會造成文字縮排