<%@LANGUAGE="VBSCRIPT" CODEPAGE="950"%> 拓米數位CSS串接樣式表教學文件
文件標題:[F001]項目符號樣式之一list-style-image使用圖檔、list-style-position對齊

內容說明:

1、項目符號樣式 list-style-image
2、項目符號樣式 list-style-position

教學內容:

1、項目符號樣式 list-style-image

將項目符號用圖檔來顯示,用相對位置取得圖檔

語法:list-style-image:url(../images/bookicon.gif圖檔位置URL)

範例:寫在<UL>標籤內,使用圖檔

語法:

<ul style="list-style-image:url(../images/bookicon.gif);">

樣式值 意義
url(../images/bookicon.gif)
  • 第一本書名
  • 第二本書名
  • 第三本書名
  • 第四本書名
  • 第五本書名

2、項目符號樣式 list-style-position

將項目符號用圖檔來顯示,用相對位置取得圖檔

語法:list-style-position:樣式值

範例:寫在<UL>標籤內,使用圖檔

語法:

<ul style="list-style-image:url(../images/bookicon.gif);list-style-position:樣式值;">

樣式值 意義

inside

對齊項目符號左邊界

  • 第一本書名

  • 地理科學
  • 第二本書名
    歷史要點
  • 第三本書名
    文化史蹟
  • 第四本書名
    數學推論
  • 第五本書名
    電腦概論

outside

不對齊項目符號左邊界

  • 第一本書名

  • 地理科學
  • 第二本書名
    歷史要點
  • 第三本書名
    文化史蹟
  • 第四本書名
    數學推論
  • 第五本書名
   
   最後修改日期: 2003年10月8日