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

资源描述

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

《第5章列表与超链接补充案例.docx》由会员分享，可在线阅读，更多相关《第5章列表与超链接补充案例.docx（29页珍藏版）》请在冰豆网上搜索。

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

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

第五章补充案例

案例5-1创建三级列表

一、案例描述

1、考核知识点

列表的嵌套

2、练习目标

Ø掌握列表嵌套的方法

Ø熟练地使用列表的嵌套制作多级列表

3、需求分析

在使用列表时，列表项中有可能包含若干子列表项，要想在列表项中定义子列表项就需要将列表进行嵌套。

为了让初学者熟悉列表嵌套的方法，本案例通过无序列表和有序列表进行嵌套，实现一个三级列表效果。

4、案例分析

1）效果如图5-1所示。

图5-1列表的嵌套效果

2）具体实现步骤如下：

a）定义无序列表

b）在无序列表

中嵌套有序列表。
二、案例实现
新建HMTL文件，具体代码如下：
1
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
2"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
//www.w3.org/1999/xhtml">
4
5
6创建三级列表
7
8
9
- 咖啡
  11
  - 摩卡
  - 蓝山
  15
- 茶
  17
  - 红茶
  - 绿茶
    20
    1. 龙井
    2. 碧螺春
    24
  26
- 牛奶
29
30
保存后，在火狐浏览器中预览，效果如图5-2所示。
图5-2列表的嵌套
注意：
1、
与

2、

案例5-2定义列表实现图文混排

一、案例描述

1、考核知识点

定义列表实现图文混排

2、练习目标

Ø掌握定义列表的基本语法

Ø熟练地使用定义列表实现图文混排

3、需求分析

图文混排是网页中常见的效果，而定义列表可用于对术语、名词或图片进行解释和描述。

当使用定义列表描述图片时，可轻松实现图文混排。

本案例将运用定义列表实现一个图文混排的效果。

4、案例分析

1）效果如图5-3所示。

图5-3定义列表的图文混排

2）具体实现步骤如下：

a）使用dt标记定义图像。

b）使用dd标记定义对图像解释说明的文字。

c）对dt和dd构成的盒子均设置浮动。

二、案例实现

1、制作页面结构

新建HMTL文件，具体代码如下：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

2"http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

6定义列表实现图文混排

13谈华为的管道战略

华为执行副总裁徐直军：

华为致力于通过提升管道容量、增强管道使能、优化管道管理，使管道更宽、管道覆盖更广、客户体验更好。

在上面的代码中，将图像嵌套于

然后对

关于浮动这里了解即可，在后面的章节中将会详细介绍。

2、定义CSS样式

使用行内式CSS样式表为页面添加样式，具体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{

5width:

316px;

6height:

137px;

7margin:

20pxauto;

8background-color:

#FFFFFF;

9border:

1pxsolid#669800;

10}

11.contentdt{float:

right;}/*dt标记控制的，图像所在的盒子右浮动*/

12.contentdtimg{display:

block;}/*去掉图像底部3px的间隙*/

13.contentdd{

14width:

180px;

15float:

left;/*dd标记控制的，文本所在的盒子左浮动*/

16padding:

18px0013px;

17}

18.contentddh3{

19font-size:

15px;

20height:

28px;

21color:

#669800;

22}

23.contentddp{line-height:

19px;}

保存后，在火狐浏览器中预览，效果如图5-4所示。

图5-4定义列表的图文混排

注意：

1、

与

但是

2、使用定义列表实现图文混排的关键在于对dt和dd均设置浮动。

3、上面代码的第18行用于去掉图像底部3px的间隙，这里了解即可，在第9章将详细介绍。

案例5-3灵活的列表项目符号

一、案例描述

1、考核知识点

背景图像定义列表项目符号

2、练习目标

Ø掌握背景图像定义列表项目符号的方法

Ø熟练地使用链接伪类控制超链接文本

Ø复习盒子模型的相关知识

3、需求分析

在实际网页制作过程中，为了更高效地控制列表项目符号，通常将列表的list-style属性值定义为none，然后通过为

设置背景图像的方式实现不同的列表项目符号。
接下来，通过创建一个公司信息动态的案例做具体演示。
4、案例分析
1）效果如图5-5所示。
图5-5灵活的列表项目符号
2）具体实现步骤如下：
a）定义一个class为all的大盒子，用于对页面的整体控制。
b）使用h2标记和ul标记将页面分为标题和内容两部分。
c）为
设置背景图像。
d）通过链接伪类控制文本样式。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
1
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
2"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
//www.w3.org/1999/xhtml">
4
5
6背景图像定义列表项目符号
7
8
9
10公司动态
11
12
传智播客大型人才招聘会成功举行

设计免费公开课-授技数码照片图像精修技巧

花再多钱也买不来的UI面试神器免费送啦

传智播客2014版全新IT入门教程光盘免费领

在上面的代码中，定义了一个class为all的大盒子，用于对页面元素的整体控制。

然后使用h2标记和ul标记定义页面的标题和内容。

2、定义CSS样式

使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：

2body,h2,ul,li{padding:

0;margin:

0;list-style:

none;}

3.all{width:

300px;height:

160px;margin:

20pxauto;border:

1pxsolid#D9E0EE;border-top:

1pxsolid#FF8400;}

4.hd{height:

35px;padding-left:

10px;font-size:

18px;line-height:

35px;}

5.bd{border-top:

1pxsolid#D9E0EE;padding:

5px0010px;}

6.bdli{line-height:

24px;background:

url（images/qipao.jpg）no-repeatleftcenter;padding-left:

18px;}

7a:

link,a:

visited{font-size:

12px;text-decoration:

none;color:

#3c3c3c;}

8a:

hover{color:

#FF8400;text-decoration:

underline;}

9.one:

link,.one:

visited{color:

#FF8400;}

10.two:

link,.two:

visited{color:

#0080C0;}

11.two:

hover{color:

#FF8400;}

保存后，在火狐浏览器中预览，效果如图5-6所示。

图5-6灵活的列表项目符号

注意：

1、同时使用链接的4种伪类时，通常按照a:

link、a:

visited、a:

hover和a:

active的顺序书写，否则定义的样式可能不起作用。

2、实际工作中，通常只需要使用a:

link、a:

visited和a:

hover定义未访问、访问后和鼠标悬停时的链接样式。

3、常常对a:

link和a:

visited应用相同的样式，使未访问和访问后的链接样式保持一致。

案例5-4easy导航栏

一、案例描述

1、考核知识点

链接伪类

2、练习目标

Ø掌握链接伪类控制超链接样式的方法

Ø掌握列表的具体应用

Ø复习背景图像属性的相关知识

3、需求分析

定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。

为了便于初学者的理解和掌握，接下来，通过创建一个简单的导航栏做具体演示。

4、案例分析

1）效果如图5-7所示。

图5-7导航栏显示效果

2）具体实现步骤如下：

a）定义无序列表

b）为

添加超链接。
c）通过CSS伪类控制超链接样式。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
1
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
2"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
//www.w3.org/1999/xhtml">
4
5
6easy导航栏
7
8
9
- 网址大全
- 电视剧
- 最新电影
- 网址大全
- 热门游戏
- 小游戏
17
18
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
1
2body,ul,li{margin:
0;padding:
0;list-style:
none;}
3body{font-size:
14px;color:
#3c3c3c;}
4ul{margin:
50pxauto;width:
660px;}
5ulli{float:
left;width:
110px;height:
42px;line-height:
42px;}
6a:
link,a:
visited{color:
#3c3c3c;text-decoration:
none;display:
block;text-align:
center;}
7a:
hover{background-color:
red;}
保存后，在火狐浏览器中预览，效果如图5-8所示。
图5-8默认显示效果
当鼠标移上链接文本时，该文本会出现背景，用于提示用户当前的操作项。
如图5-9所示，即为鼠标移上“网址大全”时页面的显示效果。
图5-9鼠标移上显示效果
注意：
在实现本案例时，需要注意以下几点：
1、一个盒子只能添加一个背景图像，要实现本例的效果则需要4个盒子。
2、可以设置背景图像的平铺方式，本案例使用no-repeat定义背景图像不平铺。
3、设置背景时通常使用其复合属性。
4、经常需要使用background-position属性改变背景图像的位置。
案例5-5制作XX歌曲排行榜
一、案例描述
1、考核知识点
有序列表

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

搜狐热点新闻