iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
1
Modern Web

我可以修改,所以先亂打系列 第 20

第20天:CSS-項目符號

  • 分享至 

  • xImage
  •  

在這篇文章中,
會介紹如何用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
符號在文字方框內,會造成文字縮排


上一篇
第19天-方框(下)
下一篇
第21天:CSS-常用表格屬性
系列文
我可以修改,所以先亂打30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言