列表 

 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  阅读(200)  评论(0)    收藏  举报