如何修改列表项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大写英文字母

不行，如果是使用css自带的list-style属性定义前面的小圆点则不同浏览器，不同版本均有自己的解析方法，无法通过css实现具体控制，淘宝的是背景图片，使用css的list-style定义不确定因素太大，如果要求严格美观的页面布局应该在整个css中预先就清除列表元素的list-style属性然后用背景图片实现效果

li标签在html中大多作为导航或信息列表的结构。其实li配合list-style-type和list-style-position可以方便的设置小圆点或三角箭头。注意list-style-position: inside需要设置为inside设置在盒模型内才能生效。

除去list-style-type设置图标，可以用常规的relative配合absolute来设置箭头或者圆点等。

---