首页 / CSS / CSS：list-style修改列表属性控制li标签样式

CSS：list-style修改列表属性控制li标签样式

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS：list-style修改列表属性控制li标签样式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1419字，纯文字阅读大概需要3分钟。

内容图文

list_style属性用于修改列表的属性，list-style-type用于设置列表项类型，list-style-position用于设这列表项位置，list-style-image用于设置使用图像替换列表项标记

list_style属性用于修改列表的属性

格式如下：

list_style：列表项标记类型 列表项标记的位置 列表项标记;

也可以单独设置列表项标记：

list-style-type用于设置列表项类型：

默认值为disc为实心圆，

常用值：none空

circle空心圆

square实心方块

decimal数字

lower-latin小写拉丁字母a,b,c.....

upper-latin大写字母A,B,C....

list-style-position用于设这列表项位置：

默认值outside表示在li标签外部，这是对li添加边框border：1px solid red;可以看到标记的位置。

inside表示标记在li标签里面，同样添加边框时可以清晰地看到。

list-style-image用于设置使用图像替换列表项标记：

默认值：none

可选值：URL ，格式为url("url地址");

举例：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style type="text/css"> 
ul { 
border:1px solid red; 
} 
li{ 
border:1px solid red; 
list-style:disc outside url(news_list.gif); 
list-style-position:5px; 
} 
</style> 
</head> 
<ul> 
<li>你好</li> 
<li>我好</li> 
</ul> 
<body> 
</body> 
</html>

规定一个 "list-style-type" 属性以防图像不可用。

以上就是CSS： list-style修改列表属性控制li标签样式的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS：list-style修改列表属性控制li标签样式全部内容，希望文章能够帮你解决CSS：list-style修改列表属性控制li标签样式所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/413374.html

来源：【匿名】