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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。