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 修改的這幾個列表清單（項目清單）的呈現方式，有實心方形、空心圓、圖示以及位置調整，除了這幾種基本款的調整之外，還有更多調整參數，你可以從以下幾則屬性的詳細介紹看到更多的參數設定與範例。
延伸閱讀
© Copyright webtech.tw Since 2010