今天給某公司做招聘專頁。早上完成設計圖，下午開始排版。頁面套用了我之前做的某人才局的招聘頁面，導航欄、banner 很快就出來了。這次內容里我有些地方用了列表，當然要用 <ul> <li> 標簽。列表項（小圓點）做成綠色的小正方塊，這時我想是不是有一個 CSS 屬性用來自定義列表項。 不用不知道，還 ...
今天給某公司做招聘專頁。早上完成設計圖，下午開始排版。頁面套用了我之前做的某人才局的招聘頁面，導航欄、banner 很快就出來了。這次內容里我有些地方用了列表，當然要用 <ul> <li> 標簽。列表項（小圓點）做成綠色的小正方塊，這時我想是不是有一個 CSS 屬性用來自定義列表項。 不用不知道，還真有。list-style 其中可定義 list-style-type、list-style-position 和 list-style-image，這三個屬性是可以合在一起寫。list-style-image 正是自定義列表項圖案。
開始定義他們之前，我遇到了兩個問題：1、 <li> 標簽預設樣式小圓點不見了。查看後發現，初始化樣式表 <ul> 定義了 list-style: none，導致預設的小圓點去掉了。那需要我們把 <ul> 的 list-style 定義一下。2、list-style-position 有兩個可選值：insite 和 outsite，使用 insite （列表項在行內）沒有問題，但使用 outsite（列表項在行外），小圓點就不見了。原來還是因為初始化樣式表，它把 <div> 定義了 overflow: hidden，溢出 <div> 那部分會被切掉。而 <ul> 包含在 <div> 裡面，所以 <div> 把溢出的列表項給切掉。這裡把 <div> 定義預設的 visible 就行了。
可以開始自定義列表圖案。首先，把圖案從 PS 上切下來保存在指定位置。定義 list-style-image: url(i/icon.gif)。問題來了，圖案沒有和文字水平居中。百度之，日 <li> 需設置固定高度，設之，無用。仔細再查，原來前人對自定義圖案早有經驗：方案1，在列表項圖案切圖時包含底下留白，該方案要確保圖案留白與頁面底色一致。我認為此方案不優雅，因為字體可能會變大變小因此，不能復用。方案2，用 background 屬性自定義項目列表圖案。此方案可靈活控製圖案位置，而且文字與圖案之間間距也易於控制，（我不會告訴你用 padding 控制間距）。總結一下，其實初始化樣式表將 <li>預設的小圓點去掉是有其道理。第一，大多情況下，不會用到列表項。第二，用 list-style 自定義列表項實在不好控制。
