博客列表 >HTML实践-列表基础【有序,无序,列表嵌套】

HTML实践-列表基础【有序,无序,列表嵌套】

山下之石
山下之石原创
2020年10月07日 16:56:363089浏览

列表相关知识

1 有序列表:

ol:定义有序列表
li:定义列表项
ol的属性type可以定义有序标识,如1,则排序1,2,3.如a,则排序a,b,c

2 有序列表样例代码

  1. <!-- 有序列表演示 -->
  2. <ol type="1">酒类
  3. <li>酒鬼酒</li>
  4. <li>水井坊</li>
  5. <li>古井贡</li>
  6. </ol>
  7. <ol type="A">香烟
  8. <li>希尔顿</li>
  9. <li>大中华</li>
  10. <li>柔和七星</li>
  11. </ol>

3 有序列表实例截图

有序列表样例

4 无序列表:

ul:定义无序列表
li:定义列表项
ul列表的属性type 定义提示符演示,比如:cricle,圆圈,squre,方块提示。

5 无序列表样例代码

  1. <!-- 无序列表 -->
  2. <ul type="circle">满汉全席
  3. <li>蒸鹿尾</li>
  4. <li>烧花鸭</li>
  5. <li>清蒸哈什蚂</li>
  6. </ul>
  7. <ul type="square">八旗
  8. <li>镶黄旗</li>
  9. <li>正蓝旗</li>
  10. <li>正红旗</li>
  11. </ul>
  12. <ul>零食
  13. <li>富力饼干</li>
  14. <li>大白兔</li>
  15. </ul>

6 无序列表实例截图

无序列表样例

7 列表的嵌套【常用语页面导航】

  1. <!-- 列表嵌套 -->
  2. <ul>
  3. <li>
  4. 编程语言
  5. <ul>
  6. <li>java</li>
  7. <li>c#</li>
  8. <li>PHP</li>
  9. </ul>
  10. </li>
  11. <li>
  12. 数据库
  13. <ul>
  14. <li>ORACLE</li>
  15. <li>SQLSERVER</li>
  16. <li>MYSQL</li>
  17. </ul>
  18. </li>
  19. </ul>

8 列表嵌套效果

无序列表嵌套

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议