CSS列表样式

本文介绍了CSS如何设置有序和无序列表的样式,包括使用`list-style-type`设置列表项标记,用`list-style-image`展示图像标记,以及如何通过CSS解决不同浏览器间列表样式的兼容问题。示例中展示了去除列表项标记的方法和实现浏览器兼容的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

CSS列表属性作用如下

  1. 设置不同的列表项标记为有序列表
  2. 设置不同的列表项标记为无序列表
  3. 设置列表项标记为图像

无序列表:用特殊图形标记列表项

有序列表:用数字或字母标记列表项

CSS列表属性

属性描述
list-style简写属性,用于吧所有列表的属性设置于一个声明中
list-style-image将图像设置为列表项标志
list-style-position设置列表中列表项标志的位置
list-style-type设置列表项标志的类型

属性list-style-type举例:

<html>
<head>
<meta charset="utf-8"> 
<title>list-style-type学习</title> 
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>无序列表实例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

输出样式:

属性list-style-image举例:

<html>
<head>
<meta charset="utf-8"> 
<title>list-style-image学习</title> 
<style>
ul 
{
	list-style-image:url('sqpurple.gif');
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

输出:

设置列表中某一行的属性:

例如:去除上面样式中第一行前面的标记(有些场景会用到)

<html>
<head>
<meta charset="utf-8"> 
<title>有趣的列表样式</title> 
<style>
ul 
{
	list-style:square url("sqpurple.gif");
}
</style>
</head>

<body>
<ul>
<li style="list-style:none">Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

输出:

可以看到,第一行coffee前面的标记被去除了

 

列表的浏览器兼容问题

上面的例子在所有浏览器中显示并不相同,IE和Opera显示图像标记比火狐,Chrome和Safari更高一点点。

如果你想在所有的浏览器放置同样的形象标志,就应使用浏览器兼容性解决方案,过程如下

解决方案:

简单的说就是:ul 不设置样式,在li中设置具体方案

ul:
    设置列表样式类型为没有删除列表项标记
    设置填充和边距0px(浏览器兼容性)
ul中所有li:
    设置图像的URL,并设置它只显示一次(无重复)
    您需要的定位图像位置(左0px和上下5px)
    用padding-left属性把文本置于列表中

举例:

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul
{
	list-style-type:none;
	padding:0px;
	margin:0px;
}
ul li
{
	background-image:url(sqpurple.gif);
	background-repeat:no-repeat;
	background-position:0px 5px; 
	padding-left:14px;
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>

输出:

使用上述的方法,就能解决不同浏览器之间的样式兼容问题,CSS还真的是神器!!!!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值