列表样式类型属性(list-style-type)
这个属性用来设定列表项标记<li>的类型。有以下值:
• disc ( 缺省值,黑圆点)
• circle (空心圆点)
• square (小黑方块)
• decimal (数字排序)
• lower-roman (小写罗马字排序)
• upper-roman (大写罗马字排序)
• lower-alpha (小写字母排序)
• upper-alpha (大写字母排序)
• none (无列表项标记) ,最常用
列表样式位置属性(list-style-position)
列表样式位置属性(list-style-position)有两个值:
• outside (以列表项内容为准对齐) , 默认值。
• inside (以列表项标记为准对齐)
列表样式图片属性(list-style-image)
列表项标记可以用图片来表示,用列表样式图片属性(list-style-image)来设定图片。示例代码如下:
列表样式属性(list-style)
这个属性是设定列表样式的一个快捷的综合写法。用这个属性可以同时设值列表样式类型属性(list-style-type),
原文:http://home.51.com/myloveforyou217/diary/item/10034794.html
这个属性用来设定列表项标记<li>的类型。有以下值:
• disc ( 缺省值,黑圆点)
• circle (空心圆点)
• square (小黑方块)
• decimal (数字排序)
• lower-roman (小写罗马字排序)
• upper-roman (大写罗马字排序)
• lower-alpha (小写字母排序)
• upper-alpha (大写字母排序)
• none (无列表项标记) ,最常用
以disc,circle,square,none作为列表项标记的列表示例:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>列表样式属性</title>
<style type="text/css">
.disc{
list-style-type:disc;
}
.circle{
list-style-type:circle;
}
.square{
list-style-type:square;
}
.none{
list-style-type:none;
}
</style>
</head>
<body>
<ul class="disc">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ul>
<ul class="circle">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ul>
<ul class="square">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ul>
<ul class="none">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ul>
</body>
</html>
列表样式位置属性(list-style-position)
列表样式位置属性(list-style-position)有两个值:
• outside (以列表项内容为准对齐) , 默认值。
• inside (以列表项标记为准对齐)
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>列表样式属性</title>
<style type="text/css">
.u1 {list-style-position:outside}
.u2 {list-style-position:inside}
</style>
</head>
<body>
<ul class ="u1">
<li>芙蓉姐姐</li>
<li>木子美</li>
<li>竹影青瞳</li>
<li>流氓燕</li>
</ul>
<ul class ="u2">
<li>芙蓉姐姐</li>
<li>木子美</li>
<li>竹影青瞳</li>
<li>流氓燕</li>
</ul>
</body>
</html>
列表样式图片属性(list-style-image)
列表项标记可以用图片来表示,用列表样式图片属性(list-style-image)来设定图片。示例代码如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>列表样式图片</title>
<style type="text/css">
ul {list-style-image: url(../images/css_tutorials/dot02.gif)}
</style>
</head>
<body>
<ul>
<li>芙蓉姐姐</li>
<li>木子美</li>
<li>竹影青瞳</li>
<li>流氓燕</li>
</ul>
</body>
</html>
列表样式属性(list-style)
这个属性是设定列表样式的一个快捷的综合写法。用这个属性可以同时设值列表样式类型属性(list-style-type),
列表样式位置属性(list-style-position)和列表样式图片属性(list-style-image)。示例代码如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>列表样式属性</title>
<style type="text/css">
ul {list-style:circle inside url(../images/css_tutorials/dot02.gif)}
</style>
</head>
<body>
<ul>
<li>茶</li>
<li>咖啡</li>
<li>可乐</li>
</ul>
</body>
</html>
原文:http://home.51.com/myloveforyou217/diary/item/10034794.html