CSS列表属性作用如下
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
无序列表:用特殊图形标记列表项
有序列表:用数字或字母标记列表项
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还真的是神器!!!!!!