CSS如何用list-style属性控制li标签样式

2023-07-04 22:07:40 655人浏览安东尼

摘要

本文小编为大家详细介绍“CSS如何用list-style属性控制li标签样式”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS如何用list-style属性控制li标签样式”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习

本文小编为大家详细介绍“CSS如何用list-style属性控制li标签样式”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS如何用list-style属性控制li标签样式”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

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>

读到这里，这篇“CSS如何用list-style属性控制li标签样式”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网精选频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: CSS如何用list-style属性控制li标签样式

本文链接: https://www.lsjlt.com/news/348029.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341