【技能锤炼】
【案例2-1】 创建三级列表
一、案例描述
1、考核知识点
列表的嵌套
2、练习目标
Ø 掌握列表嵌套的方法。
Ø 熟练地使用列表的嵌套制作多级列表。
3、需求分析
在使用列表时，列表项中有可能包含若干子列表项，要想在列表项中定义子列表项就需要将列表进行嵌套。为了让初学者熟悉列表嵌套的方法，本案例通过无序列表和有序列表进行嵌套，实现一个三级列表效果。
4、案例分析
1) 效果如图2-1所示。
图2-1 列表的嵌套效果
2) 具体实现步骤如下：
a) 定义无序列表<ul>。
b) 在无序列表<ul>的子列表项<li>中嵌套有序列表。
二、案例实现
新建HTML文件，具体代码如下：
保存后，在谷歌浏览器中预览，效果如图2-2所示。
图2-2 列表的嵌套
注意：
1、<li>与</li>之间相当于一个容器，可以容纳所有的元素。
2、<ul></ul>和<ol></ol>中只能嵌套<li></li>，直接在<ul></ul>或<ol></ol>标记中输入文字的做法是不被允许的。
【案例2-2】 header元素的使用
一、案例描述
1、考核知识点
header元素
2、练习目标
Ø 掌握header元素的使用方法。
3、需求分析
在浏览一些网页时，网页的头部一般会存放Logo，或者是对网页宗旨性的描述语句。这些内容都可以通过header元素来定义，本案例通过header元素的使用，来实现相关效果。
4、案例分析
1) 效果如图2-3所示。
图2-3 header元素的应用效果
2) 具体实现步骤如下：
a) 在页面主体<body>中添加header元素。
b) <h2>标记用于定义标题。
c) <p>标记用于定义描述语句。
二、案例实现
新建HTML文件，具体代码如下：
保存后，在谷歌浏览器中预览，效果如图2-4所示。
图2-4 header元素的应用效果
【案例2-3】 nav元素的使用
一、案例描述
1、考核知识点
nav元素
2、练习目标
Ø 掌握nav元素的使用方法。
3、需求分析
侧边栏导航相信大家并不陌生，一般定位于网页的左侧或右侧，方便用户点击。本案例通过nav元素的使用来定义一款侧边栏导航效果。
4、案例分析
1) 效果如图2-5所示。
图2-5 侧边栏导航效果
2) 具体实现步骤如下：
a) 在页面主体<body>中添加nav元素。
b) 通过无序列表定义导航内容。
二、案例实现
新建HTML页面，代码如下：
保存后，在谷歌浏览器中预览，效果如图2-6所示。
图2-6 如何插入特殊字符效果
注意：
1、<nav>元素中也可通过插入a链接搭建导航结构。
