第5章列表与超链接_补充案例.doc

第五章 补充案例 案例5-1 创建三级列表 一、案例描述 考核知识点 列表的嵌套 练习目标 掌握列表嵌套的方法 熟练地使用列表的嵌套制作多级列表 需求分析 在使用列表时，列表项中有可能包含若干子列表项，要想在列表项中定义子列表项就需要将列表进行嵌套。为了让初学者熟悉列表嵌套的方法，本案例通过无序列表和有序列表进行嵌套，实现一个三级列表效果。 案例分析 效果如图5-1所示。 列表的嵌套效果 具体实现步骤如下： 定义无序列表ul。 在无序列表ul的子列表项li中嵌套有序列表。 二、案例实现 新建HMTL文件，具体代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title创建三级列表/title /head body ul li咖啡 ul li摩卡/li li蓝山/li /ul /li li茶 ul li红茶/li li绿茶 ol li龙井/li li碧螺春/li /ol /li /ul /li li牛奶/li /ul /body /html 保存后，在火狐浏览器中预览，效果如图5-2所示。 列表的嵌套 注意： 1、li与/li之间相当于一个容器，可以容纳所有的元素。 2、ul/ul和ol/ol中只能嵌套li/li，直接在ul/ul或ol/ol标记中输入文字的做法是不被允许的。 案例5-2 定义列表实现图文混排 一、案例描述 考核知识点 定义列表实现图文混排 练习目标 掌握定义列表的基本语法 熟练地使用定义列表实现图文混排 需求分析 图文混排是网页中常见的效果，而定义列表可用于对术语、名词或图片进行解释和描述。当使用定义列表描述图片时，可轻松实现图文混排。本案例将运用定义列表实现一个图文混排的效果。 案例分析 效果如图5-3所示。 定义列表的图文混排 具体实现步骤如下： 使用dt标记定义图像。 使用dd标记定义对图像解释说明的文字。 对dt和dd构成的盒子均设置浮动。 二、案例实现 1、制作页面结构 新建HMTL文件，具体代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title定义列表实现图文混排/title /head body dl class=content dtimg src=images/man_r1_c2.jpg alt=谈华为的管道战略//dt dd h3 class=font3谈华为的管道战略/h3 p华为执行副总裁徐直军：华为致力于通过提升管道容量、增强管道使能、优化管道管理，使管道更宽、管道覆盖更广、客户体验更好。/p /dd /dl /body /html 在上面的代码中，将图像嵌套于dt/dt标记中，将对图像解释说明的文字嵌套于dd/dd标记中。然后对dt/dt和dd/dd构成的盒子均设置浮动，这是实现图文混排的关键。关于浮动这里了解即可，在后面的章节中将会详细介绍。 2、定义CSS样式 使用行内式CSS样式表为页面添加样式，具体CSS代码如下： style type=text/css body,dl,dt,dd,h3,p,img{ padding:0; margin:0; border:0;} body{color: #3C3C3C; font-family: Arial,Helvetica,sans-serif;