开始定义他们之前，我遇到了两个问题：1、 <li> 标签默认样式小圆点不见了。查看后发现，初始化样式表 <ul> 定义了 list-style: none，导致默认的小圆点去掉了。那需要我们把 <ul> 的 list-style 定义一下。2、list-style-position 有两个可选值：insite 和 outsite，使用 insite （列表项在行内）没有问题，但使用 outsite（列表项在行外），小圆点就不见了。原来还是因为初始化样式表，它把 <p> 定义了 overflow: hidden，溢出 <p> 那部分会被切掉。而 <ul> 包含在 <p> 里面，所以 <p> 把溢出的列表项给切掉。这里把 <p> 定义默认的 visible 就行了。
可以开始自定义列表图案。首先，把图案从 PS 上切下来保存在指定位置。定义 list-style-image: url(i/icon.gif)。问题来了，图案没有和文字水平居中。百度之，日 <li> 需设置固定高度，设之，无用。仔细再查，原来前人对自定义图案早有经验：方案1，在列表项图案切图时包含底下留白，该方案要确保图案留白与页面底色一致。我认为此方案不优雅，因为字体可能会变大变小因此，不能复用。方案2，用 background 属性自定义项目列表图案。此方案可灵活控制图案位置，而且文字与图案之间间距也易于控制，（我不会告诉你用 padding 控制间距）。总结一下，其实初始化样式表将 <li>默认的小圆点去掉是有其道理。第一，大多情况下，不会用到列表项。第二，用 list-style 自定义列表项实在不好控制。
下载本文