家好，我是吉礻羊。

上图是如何实现的呢？可以说刚刚开始学习css时，这样做是很好的，但是现在有点过了，但是功能还是要会的。

下面是实例代码，新来的小伙伴们快去试下吧

css

<style type="text/css">

<!--

body { font: 12px 宋体,Arial,Verdana,Tahoma,sans-serif; }

ul { maring: 0; padding: 0; }

li {

list-style: none;

display: block;

width: 200px;

height: 20px;

line-height: 20px;

text-indent: 25px;

background: url(http://img.lanrentuku.com/img/allimg/1507/14375325421351.gif) left center no-repeat;

}

-->

</style>

html

<table>

<td height="100" valign="top">

<ul>

<li>测试第一项</li>

<li>测试第二项</li>

<li>测试第三项</li>

<li>测试第四项</li>

<li>测试第五项</li>

<li>测试第六项</li>

</ul>

</td>

</tr>

<tr>

<td height="100" valign="top">

<ul>

<li>测试第一项</li>

<li>测试第二项</li>

<li>测试第三项</li>

<li>测试第四项</li>

<li>测试第五项</li>

<li>测试第六项</li>

</ul>

</td>

</tr>

</table>

这里我是用的表格，因为这样拉出来的快，但是学习中的你记得写成自己的div哦！

然我们从事web前端外包开发服务很长时间了，但是对于li-style-type 的名称和对应的符号，依旧是模棱两可的，这方面我们要反省，要加强记忆，要把查询文档放在任何可以快速查到的地方， 你是否和我一样？

css中用list-style-type指定列表（lists）前面符号,如下：

li {list-style-type:符号名称}

符号名称可用的值为：

disc : CSS1　实心圆

circle : CSS1　空心圆

square : CSS1　实心方块

decimal : CSS1　阿拉伯数字

lower-roman : CSS1　小写罗马数字

upper-roman : CSS1　大写罗马数字

lower-alpha : CSS1　小写英文字母

upper-alpha : CSS1　大写英文字母

none : CSS1　不使用项目符号

armenian : CSS2　传统的亚美尼亚数字

cjk-ideographic : CSS2　浅白的表意数字

georgian : CSS2　传统的乔治数字

lower-greek : CSS2　基本的希腊小写字母

hebrew : CSS2　传统的希伯莱数字

hiragana : CSS2　日文平假名字符

hiragana-iroha : CSS2　日文平假名序号

katakana : CSS2　日文片假名字符

katakana-iroha : CSS2　日文片假名序号

lower-latin : CSS2　小写拉丁字母

upper-latin : CSS2　大写拉丁字母

来源：切图网 www.qietu.com