使用自定义圆点符号来完成自己的想象

或许你想要在清单里保留小圆点符号,但是不想用浏览器无趣的默认设置,更像用自己的小圆点图案.有两种方法可以达成你想要的 — 而我更推崇第二种方法,因为它可以在各种浏览器之间更好的兼容.

第一种方法是用 list-style-image 属性来指定用来替代默认小圆点的图片名称.

ul{
list-style-image:url(i_hot.gif)
}

这是最简单的方法,但是它会在不同浏览器之间的图片垂直对齐位置上有所不同,有些浏览器会把图片和项目文字中线对齐,也有的会把图片放得稍微高一点,它们之间有一点不一致.

为了避免 list-style-image 造成的几个流行浏览器之间的对齐问题,我比较喜欢用一种替代方法:把图片作为每个<li>元素的背景.

首先,我们要去掉默认的圆点,然后再加上我们自己的背景图片:

ul{
list-style:none;
}
li{
background-image:url(i_hot.gif) no-repeat 0 50%;
padding-left:25px;
}

no-repeat 会告诉浏览器不把背景图片进行平铺操作(默认会平铺),而0 50%会告诉浏览器把背景图片放置在距离左边 0 像素,距离上面 50% 的地方,让背景图片 i_hot.gif 根据中线对齐.我们也可以用精确的像素来指定位置,比如说 0 6px 会让图片放置在距离左边0像素,距离上面 6 像素的位置上.

我们还要在清单项目的左边加上17像素的内补丁(padding),以便我们把宽20像素高11像素的图片能够完整显示出来,同时又留有一点空白,而不会和文字有重叠.这些数据应该根据你所使用的图片尺寸进行调整( 图 1 - 6 )

图 1 - 6 自定义圆点图片的清单

出处：蓝色理想
责任编辑：moby

上一页 标记语言——清单 [7] 下一页 标记语言——清单 [9]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。