WEBTECH 網頁設計教學站
CSS list-style 列表設計
CSS list-style 是讓網頁設計師用來重新設計列表清單(或項目清單)用的功能,它可以讓傳統的 ul li tag 與 ol li tag 發揮出更美觀的效果,主要分為設計項目符號開頭標籤顯示樣式的 list-style-style、設計項目符號開頭圖示的 list-style-image 以及控制列表清單位置的 list-style-position,這三項屬性都非常簡單,而且對內文排板有很大的幫助,我們這裡先看一下傳統的 HTML ul li 標籤效果。
<ul>
 <li>這是 ul li 清單</li>
 <li>這是 ul li 清單</li>
</ul>
<ol>
 <li>這是 ol li 清單</li>
 <li>這是 ol li 清單</li>
</ol>
看起來會像這樣
  • 這是 ul li 清單
  • 這是 ul li 清單
  1. 這是 ol li 清單
  2. 這是 ol li 清單
接著我們把 list-style-style, list-style-image, list-style-position 這三項屬性套用進去給各位讀者朋友參考,首先是程式碼的部份。
<ul style="list-style-type:square;">
 <li>前方為方形</li>
 <li>前方為方形</li>
</ul>
<ul style="list-style-type:circle;">
 <li>前方為空心圓</li>
 <li>前方為空心圓</li>
</ul>
<ul style="list-style-image:url('upload/20150909194640.png');">
 <li>前方為圖形</li>
 <li>前方為圖形</li>
</ul>
<ul style="list-style-position:inside;">
 <li>這是在標籤範圍之內顯示</li>
 <li>這是在標籤範圍之內顯示</li>
</ul>
<ul style="list-style-position:outside;">
 <li>這是在標籤範圍之外顯示</li>
 <li>這是在標籤範圍之外顯示</li>
</ul>
接著是展示實際效果
  • 前方為方形
  • 前方為方形
  • 前方為空心圓
  • 前方為空心圓
  • 前方為圖形
  • 前方為圖形
  • 這是在標籤範圍之內顯示
  • 這是在標籤範圍之內顯示
  • 這是在標籤範圍之外顯示
  • 這是在標籤範圍之外顯示
我們在範例中分別利用 CSS list-style 的 list-style-type、list-style-image 與 list-style-position 修改的這幾個列表清單(項目清單)的呈現方式,有實心方形、空心圓、圖示以及位置調整,除了這幾種基本款的調整之外,還有更多調整參數,你可以從以下幾則屬性的詳細介紹看到更多的參數設定與範例。
延伸閱讀

連絡我們