css之列表
ol有序列表,ul无序列表,li横向列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>实验</title>
<style>
<!-在head中添加style设置字体背景,文字样式,文字居中等->
body{background-color: lightblue};
<!-ul无序列表,ol有序列表->
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>
<ul class="a">
<li>Coffee</li><!-li标签横向排列->
<li>Tee</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>java</li>
<li>python</li>
<li>C#</li>
</ul>
<ol class="c">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<ol class="d">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</body>
</html>
运行结果为
属性 | 描述 |
---|---|
list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
list-style-image | 将图像设置为列表项标志。 |
list-style-position | 设置列表中列表项标志的位置。 |
list-style-type | 设置列表项标志的类型。 |
list-style-position:outside、inside