加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

列表项ol、ul前项目符号

(2013-09-03 17:29:08)
标签:

杂谈

在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:square;margin-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 列表项目符号在文本以内,文本根据标记对齐。

特别提示

本例代码运行效果如图2.1.6.9所示,原本为实心圆点的列表符号现在已经变成了实心方块。

特别说明

list-style-type属性用于设置列表项目前的符号,对应的脚本特性为listStyType,可选值及说明如表2.1.6.1所示。list-style-image属性用于设置列表项目前的自定义图片,对应的脚本特性为listStyleImage。如果同时设置 list-style-image 和 list-style-type,则list-style-type属性将被忽略,除非 list-style-image的值设置为 none 或指定的图片不可用,list-style-type才有作用。list-style-type、list-style-position和list-style-image的复合属性为list-style。 
表2.1.6.1 list-style-type属性的可选值

可选值说明

none不使用项目符号 
disc实心圆,默认值 
circle空心圆 
square实心方块 
decimal阿拉伯数字 
lower-roman小写罗马数字 
upper-roman大写罗马数字 
lower-alpha小写英文字母 
upper-alpha大写英文字母

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有