如何修改列表项li、ul前的圆点小方块

解决思路：

在HTML中没有相应的属性可以设置该效果，但在CSS中可以，相应的属性为list-style-type，要把圆点改成实心方块，只需要设置list-style-type的值为square。

具体步骤：

代码示例：

<ul style="list-style-type:square">

<li>list1

<li>list2

<li>list3

<li>list4

</ul>

技巧：想必大家都注意到，列表项离左边有很大一段距离，利用前面学过的知识，设置margin-left属性就行了：

<ul style="list-style-type:squaremargin-left:12px">

<li>list1

<li>list2

<li>list3

<li>list4

</ul>

另外，如果要把小黑点换成自定义图片，可以用list-style-image，用法：

list-style-image:url(demo.gif)

提示：对于列表项目，还有一个list-style-position属性可以定义，主要用于设置列表项前的符号根据列表文字的排列方式，对应的脚本特性为listStylePosition。可选值的说明如下：

outside 列表项目符号在文本以外，文本不根据标记对齐。

inside 列表项目符号在文本以内，文本根据标记对齐。

可选值说明

none不使用项目符号

disc实心圆，默认值

circle空心圆

square实心方块

decimal阿拉伯数字

lower-roman小写罗马数字

upper-roman大写罗马数字

lower-alpha小写英文字母

upper-alpha大写英文字母

在HTML中没有相应的属性可以设置该效果，但在CSS中可以，

1，将圆点变成小方块：相应的属性为list-style-type，要把圆点改成实心方块，只需要设置list-style-type的值为square。

eg：ul li {

list-style-type: square

}

2，将小圆点换成自定义图片：

eg：ul li{

list-style-type: none/*先去掉黑点*/

background: url(http://***.gif)no-repeat center left /*链接图片地址*/

padding-left: 20px /*图片的宽度，若不设置，图标会被文字覆盖*/

}

引用自定义图片

语法：list-style-image : none | url (url)

eg. li {list-style-image : url (image/aa.gif)}

引用系统图案

语法：

list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

参数：

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　大写拉丁字母

说明：

设置或检索对象的列表项所使用的预设标记。

若list-style-image属性为none或指定图像不可用时，list-style-type属性将发生作用。

仅作用于具有display值等于list-item的对象（如li对象）。

注意：ol对象和ul对象的type特性为其后的所有列表项目（如li对象）指明列表属性。请参阅我的其他著作。

IE5.5尚不支持所有CSS2的值。

对应的脚本特性为listStyleType。请参阅我编写的其他书目。

示例：

li { list-style-type: square }

---