列表

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7         /*
 8         去掉默认的项目符号
 9         */
10        ul{
11            list-style: none;
12        }
13        </style>
14     </head>
15     <body>
16         <!--
17         在网页中一共有三种列表:
18         1.无序列表
19         2.有序列表
20         3.定义列表
21         
22         列表之间可以相互嵌套的,可以在无序列表中放入有序列表,
23         也可以在有序列表中放入一个无序列表
24         
25         1.无序列表
26         使用ul标签来创建一个无序列表
27         使用li在ul中创建一个一个的列表项
28         一个li就是一个列表
29         
30         通过type属性可以修改无序列表的项目符号
31         可选值:
32         disc 默认值 实心的圆点
33         square 实心的方块
34         circle 空心的圆圈
35         注意:默认的项目符号在不同的浏览器显示的效果不同,所以我们一般不使用!
36         如果需要设置项目符号,则可以采用设置背景图片的方式来设置。
37         
38         ul和li都是块元素
39         2.有序列表
40         和无序列表类似,只不过他使用ol来代替ul
41         有序列表使用有序的序号作为项目序号
42         type属性,可以指定序号的类型
43         可选值:1 默认值,使用阿拉伯数字
44                a/A 采用字母作为序号
45                i/I 采用罗马字母作为序号
46         ol也是块元素
47         
48         
49         3.定义列表
50         定义列表用来对一些词汇或内容进行定义
51         使用dl来创建一个定义列表
52         dl中有两个子标签
53         dt :被定义的内容
54         dd :对定义内容的描述
55         -->
56         <dl>
57             <dt>吴青峰</dt>
58             <dd>苏打绿主唱</dd>
59         </dl>
60         <ul>
61             <li>123</li>
62             <li>234</li>
63         </ul>
64         <ol>
65             <li>123</li>
66             <li>234</li>
67         </ol>
68         <p>菜谱</p>
69         <ul>
70             <li>鱼香肉丝
71             <ol>
72                 <li></li>
73                 <li>肉丝</li>
74             </ol>
75             <li>宫保鸡丁
76             <ul>
77             <li>鸡肉</li>
78             <li>花生</li>
79             </ul>
80             </li>
81         </ul>
82         
83     </body>
84 </html>

 

posted @ 2019-07-10 16:38  zuiaimiusi  阅读(191)  评论(0编辑  收藏  举报