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

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

解决思路:

在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大写英文字母

list-style-type:disc把这个去掉 默认就是圆点的。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。

从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

在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 /*图片的宽度,若不设置,图标会被文字覆盖*/

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11186693.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存