第2章补充案例.PDF

博学谷——让IT 教学更简单，让IT 学习更有效 第2 章 补充案例 案例2-1 创建三级列表 一、案例描述 1、考核知识点 ul 元素、ol 元素 2、练习目标  掌握列表嵌套的方法  熟练地使用列表的嵌套制作多级列表 3、需求分析 在使用列表时，列表项中有可能包含若干子列表项，要想在列表项中定义子列表项就需要将 列表进行嵌套。为了让初学者熟悉列表嵌套的方法，本案例通过无序列表和有序列表进行嵌套， 实现一个三级列表效果。 4、案例分析 1) 效果如图2-1 所示。 图2-1 列表的嵌套效果 2) 具体实现步骤如下： a) 定义无序列表ul 。 b) 在无序列表ul 的子列表项li 中嵌套有序列表。 二、案例实现 新建HMTL 文件，具体代码如下： 1 !doctype html 2 html 3 head 4 meta charset=utf-8 5 title创建三级列表/title 1 博学谷——让IT 教学更简单，让IT 学习更有效 6 /head 7 body 8 ul 9 li咖啡 10 ul 11 li摩卡/li 12 li蓝山/li 13 /ul 14 /li 15 li茶 16 ul 17 li红茶/li 18 li绿茶 19 ol 20 li龙井/li 21 li碧螺春/li 22 /ol 23 /li 24 /ul 25 /li 26 li牛奶/li 27 /ul 28 /body 29 /html 保存后，在火狐浏览器中预览，效果如图2-2 所示。 图2-2 列表的嵌套 注意： 1、li与/li之间相当于一个容器，可以容纳所有的元素。 2 、ul/ul和ol/ol 中只能嵌套li/li ，直接在ul/ul或ol/ol标记中输入文字的做法是 不被允许的。 2 博学谷——让IT 教学更简单，让IT 学习更有效 案例2-2 定义列表实现图文混排 一、案例描述 1、考核知识点 dl 元素 2 、练习目标  掌握定义列表的基本语法  熟练地使用定义列表实现图文混排 3、需求分析 图文混排是网页中常见的效果，而定义列表可用于对术语、名词或图片进行解释和描述。当 使用定义列表描述图片时，可轻松实现图文混排。本案例将运用定义列表实现一个图文混排的效 果。 4 、案例分析 1) 效果如图2-3 所示。 图2-3 定义列表的图文混排 2) 具体实现步骤如下： a) 使用dt 标记定义图像。