<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul{ /* * 设置列表样式:设置为空 list-style: none; 去掉无序列表默认的小圆点 ul表示无序列表 * */ list-style: none; } </style> </head> <body> <!--ul:无序列表 外面的大标签,u就是un表示没有,l表示list列表的意思 列表标签类似python中的list列表类型,用来存放多个数据 ul下面会嵌套li 默认有一个黑点 type可以设置点的类型,type="square" circle表示空心圆点 disc是默认的,实心黑点.默认是实心黑点 squre是正方形 有序列表是ol,就是前面有序号1,2,3... --> <ul type="square"> <li>周忠杰</a></li> <li><a href="#">如果没有</a></li> <li><a href="#">如果有,想换一个吗?</a></li> <li><a href="#">如果不想,介意多一个?</a></li> </ul> <!--div按tab键快速生成div标签--> <div></div> <!--div.加tab键快速生成div class--> <div class="box"></div> <!--ul>li*5>a 加tab键快速生成下面的效果 >这个箭头表示嵌套关系--> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> <!-- ol:有序列表 o是organization 组织的意思 前面有序号,会自动添加 type="1",默认是从1开始, type="a",也可以从字面a开始 type="A",也可以从字面A开始 还可以设置罗马数字 start="3" 起始位置,无序列表是没有这个属性的 --> <ol type="1" start="3"> <li>罗泽宇</li> <li>潘越</li> <li>金大中</li> </ol> <!--快捷键: ul>li*5 再按tab键就会出现下面的效果 > 表示嵌套关系 ul里面有li的意思 5表示5行 --> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
演示效果:
