<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>01</li>
<li>02</li>
<li>03</li>
</ul>
<ul class="circle">
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
<ul class="square">
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
<ul class="none">
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.列表类型以list-style-type属性定义,默认值为disc;
2.常用的列表类型如上,根据浏览器支持类型的不同,可以设置不同的类型
运行图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.decimal{
list-style-type: decimal;
}
.lAlpha{
list-style-type: lower-alpha;
}
.uAlpha{
list-style-type: upper-alpha;
}
.lRoman{
list-style-type: lower-roman;
}
.uRoman{
list-style-type: upper-roman;
}
</style>
</head>
<body>
<ol class="decimal">
<li>01</li>
<li>02</li>
<li>03</li>
</ol>
<ol class="lAlpha">
<li>01</li>
<li>02</li>
<li>03</li>
</ol>
<ol class="uAlpha">
<li>01</li>
<li>02</li>
<li>03</li>
</ol>
<ol class="lRoman">
<li>01</li>
<li>02</li>
<li>03</li>
</ol>
<ol class="uRoman">
<li>01</li>
<li>02</li>
<li>03</li>
</ol>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.列表类型以list-style-type属性定义,默认值为decimal;
2.常用的列表类型如上,根据浏览器支持类型的不同,可以设置不同的类型
运行图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.image{
list-style-image: url(img/006.png)
}
</style>
</head>
<body>
<ul class="image">
<li>01</li>
<li>02</li>
<li>03</li>
</ol>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.常用图标无法展示想要的列表时,可以使用图片定义列表类型;
2.列表标记图像以list-style-image属性定义
运行图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.inside{
list-style-position: inside;
}
.outside{
list-style-position: outside;
}
</style>
</head>
<body>
<ul class="inside">
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
<ul class="outside">
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
</body>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.列表标记位置以属性list-style-position定义,默认为outside
运行图片
list-style: square inside url('/i/eg_arrow.gif')
list-style: type position image
网友评论