列表
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>