列表

不同类型的有序列表

Type=1 表示列表项目用数字表示(1,2,3…..)
Type=a 表示列表项目用小写字母表示(a,b,c..)
Type=A 表示列表项目用大写字母表示(A,B,C..)
Type=i 表示列表项目用小写罗马数字表示(i,ii,iii….)
Type=I 表示列表项目用大写罗马数字表示(I,II,III…)

                     <ol  type=value1    start=value2>

                     start是编号开始的数字,如start=2则编号从2开始,如果从1开始可以省略。value2表示项目开始的数值。

          <ol type="a" start="5" reversed>  反序
类型

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>你好(runoob.com)</title> 
</head>
<body>

<h4>编号列表:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>大写字母列表:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>小写字母列表:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>罗马数字列表:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>小写罗马数字列表:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

</body>
</html>

 

不同类型的无序列表

无序列表中type属性的常用值有三个,它们呈现的效果不同:
小黑点:disc(默认值);
方块:square;
空心圆:circle。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>您好(runoob.com)</title> 
</head>
<body>

<p><b>注意:</b> 在 HTML 4中 ul 属性已废弃,HTML5 已不支持该属性,因此我们使用 CSS 代替来定义不同类型的无序列表如下:</p>

<h4>圆点列表:</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

<h4>圆圈列表:</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

<h4>正方形列表:</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

</body>
</html>

 

 

自定义列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>你好(runoob.com)</title> 
</head>
<body>

<h4>一个自定义列表:</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
</html>

posted on 2019-05-07 14:22  旺仔QQ糖青苹果味  阅读(192)  评论(0编辑  收藏  举报

导航