在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属性然后用背景图片实现效果欢迎分享,转载请注明来源:内存溢出
评论列表(0条)