li的编号样子实在太少太难看了，如果用list-style-image的方式，当屏幕尺寸变化的时候，图片尺寸不会改变。目前最好的方案还是用矢量图标字体。
原理很简单，一看代码就明白了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
ul {
list-style: none;
padding: 0;
}
li {
padding-left: 1.3em;
}
li:before {
content: "\f085"; /* 图标编码 */
font-family: FontAwesome;
display: inline-block;
margin-left: -1.3em; /* 和li的padding-left一致 */
width: 1.3em; /* 和li的padding-left一 */
}
</style>
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li>床前明月光</li>
<li>疑是地上霜</li>
<li>举头望明月</li>
<li>低头思故乡</li>
</ul>
</body>
</html>
效果如下：
7276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
