HTML&CSS基础学习笔记1.13-有序列表及列表嵌套
来源:互联网 发布:看得很湿的黄文 知乎 编辑:程序博客网 时间:2024/05/19 23:26
我们上篇讲到了无序列表,那么今天就来看看有序列表和他们的组合嵌套使用吧。
有序列表
现在我们要做那堆杂事了,但是发现这么多杂事,先做哪个好呢?于是我们给这堆杂事弄个优先级排序,让我们能够按照顺序做下去。HTML里用<ol>标签来表示有序列表,<ol>标签的列表项依然是用<li>标签表示。
它的代码模板是这样的:
<span style="font-family:Microsoft YaHei;"><ol> <li></li> <li></li> ...</ol></span>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用有序列表</title></head><body><h1>为有序列表添加列表项</h1><ol> <li>开会</li> <li>写报告</li> <li>睡觉</li> </ol></body></html>
列表嵌套
我们知道标签是可以嵌套的,所以列表也是可以嵌套的。当我们列表中的某些列表项是列表时,我们就可以用嵌套。
现在就通过一个例子来看看无序列表和有序列表是如何嵌套使用的吧:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用有序列表和无序列表</title></head><body><h1>省份城市</h1><ul><li>安徽省</li><li>北京市</li><li>重庆市</li><li>福建省</li><li>甘肃省<ul><li>兰州市</li><li>嘉峪关市</li><li>金昌市</li></ul></li></ul></body></html>
结果是怎样的呢?不妨前去http://www.mayacoder.com/lesson/lesson?lesson_id=31&knowledge_id=4 体验看看吧。
结果如下:
0 0
- HTML&CSS基础学习笔记1.13-有序列表及列表嵌套
- html无序有序列表嵌套
- HTML&CSS基础学习笔记1.12-无序列表
- 有序列表和无序列表 学习笔记
- HTML学习之有序列表、无序列表和自定义列表
- CSS学习笔记:列表
- HTML&CSS基础学习笔记1.23-表单的文本域和下拉列表
- HTML&CSS基础学习笔记1.23-表单的文本域和下拉列表
- html创建有序列表
- HTML有序列表使用
- <学习html>第四天笔记-注释标签;相对路径,绝对路径;有序列表,无序列表,自定义列表;总结
- HTML+CSS基础 ol标签创建一个以罗马数字作为序号的有序列表
- HTML+CSS基础 ol标签创建一个以数字作为序号的有序列表
- HTML+CSS基础 ol标签创建一个以字母作为序号的有序列表
- css基础学习----列表控件
- html定义列表嵌套
- HTML学习笔记之列表控件 无序列表 ul(Unordered List) 、有序列表 ol(Ordered List) 、定义列表 dl(Definition List)
- html学习笔记之列表
- 个人收集即时通讯方面在资料以便日后查阅
- 代码修养第二堂
- 我的Linux菜鸟之路1
- ps软件下载、安装及破解
- Ojbect对象的所有字段的表示方法
- HTML&CSS基础学习笔记1.13-有序列表及列表嵌套
- JAVA_时间计时器
- kafka集群搭建和使用Java写kafka生产者消费者
- GSON解析复杂性json串
- Reference
- android 实现由下至上弹出并位于屏幕底部的提示框
- 多线程的几种加锁方式详解
- LINQ排序,join on,分组查询,any和all量词
- 对于handler内存泄漏分析解决+实例