CSS list-style修改列表属性控制li标签样式
发布时间：2014-07-29 14:53:28 作者：佚名 
我要评论
我要评论list_style属性用于修改列表的属性，list-style-type用于设置列表项类型，list-style-position用于设这列表项位置，list-style-image用于设置使用图像替换列表项标记
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
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=gbk" />
<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" 属性以防图像不可用。
格式如下：
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=gbk" />
<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选择器设置标签样式的实例代码,需要的朋友可以参考下2018-11-22
- 下面小编就为大家带来一篇浅谈html5标签css3的常用样式。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-20
- 在布局过程中为了某些需求，将html标签在浏览器居中显示是很常见的做法，下面有个不错的示例，大家可以参考下2014-04-15
- list_style属性用于修改列表的属性，下面为大家介绍下CSS list-style属性控制li标签样式的具体实现，感兴趣的朋友可以了解下2014-03-03
- 这篇文章主要介绍了CSS实现鼠标悬停改变其他标签样式的示例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-19
最新评论