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

《第5章 列表与超链接_补充案例》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、博学谷——让IT教学更简单，让IT学习更有效第五章补充案例案例5-1创建三级列表一、案例描述1、考核知识点列表的嵌套2、练习目标Ø掌握列表嵌套的方法Ø熟练地使用列表的嵌套制作多级列表3、需求分析在使用列表时，列表项中有可能包含若干子列表项，要想在列表项中定义子列表项就需要将列表进行嵌套。为了让初学者熟悉列表嵌套的方法，本案例通过无序列表和有序列表进行嵌套，实现一个三级列表效果。4、案例分析1)效果如图5-1所示。图5-1列表的嵌套效果2)具体实现步骤如下：a)定义无序列表

。b)在无序列表
的子列表项
• 中嵌套有序列表。二、案例实现新

  2、建HMTL文件，具体代码如下：134523博学谷——让IT教学更简单，让IT学习更有效1

  3、>创建三级列表234

  5
  • 咖啡6
    7
    • 摩卡
    8
    • 蓝山
    9
    10
  11
  • 茶12
    13
    • 红茶
    14
    • 绿茶15
      16
      1. 龙井
      17
      2. 碧螺春
      18
      19
    20
    21
  22
  • 牛奶
  23
  2425保存后，在火狐浏览器中预览，效果如图5-2所示。图5-1列表的嵌套注意：1、
• 与
之间相当于一个容器，可以容

4、纳所有的元素。23博学谷——让IT教学更简单，让IT学习更有效2、

和
中只能嵌套
，直接在
或
标记中输入文字的做法是不被允许的。案例5-2定义列表实现图文混排一、案例描述1、考核知识点定义列表实现图文混排2、练习目标Ø掌握定义列表的基本语法Ø熟练地使用定义列表实现图文混排3、需求分析图文混排是网页中常见的效果，而定义列表可用于对术语、名词或图片进行解释和描述。当使用定义列表描述图片时，可轻松实现图文混排。本案例将运用定义列表实现一个图文混排的效果。4、案例分析1)效果

5、如图5-3所示。图5-1定义列表的图文混排2)具体实现步骤如下：a)使用dt标记定义图像。b)使用dd标记定义对图像解释说明的文字。c)对dt和dd构成的盒子均设置浮动。二、案例实现1、制作页面结构新建HMTL文件，具体代码如下：134

6、ad>23博学谷——让IT教学更简单，让IT学习更有效1234567

8
9谈华为的管道战略10
华为执行副总裁徐直军：华为致力于通过提升管道容量、增
7、强管道使能、优化管道管理，使管道更宽、管道覆盖更广、客户体验更好。
11
121314在上面的代码中，将图像嵌套于
标记中，将对图像解释说明的文字嵌套于
标记中。然后对
和
构成的盒子均设置浮动，这是实现图文混排的关键。关于浮动这里了解即可，在后面的章节中将会详细介绍。2、定义CSS样式使用行内式CSS样式表为页面添加样式，具体CSS代码如下：12body,dl,dt,dd,h3,p,img{

8、padding:0;margin:0;border:0;}3body{color:#3C3C3C;font-