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

18

19

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

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

2、定义CSS样式

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

1

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;}

12

保存后，在火狐浏览器中预览，效果如图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

  6

  7

  8

  9

  10

  • 网址大全

  11

  • 电视剧

  12

  • 最新电影

  13

  • 网址大全

  14

  • 热门游戏

  15

  • 小游戏

  16

  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、考核知识点

  有序列表

  2、练习目标

  Ø掌握有序列表的应用方法

  Ø理解list-style-position属性

  Ø掌握CSS控制列表样式的应用方法

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

  3、需求分析

  通过定义有序列表，可以使其各个列表项按照一定的顺序排列。

  为了便于初学者的理解和掌握，接下来，通过制作一个XX音乐排行榜的案例做具体演示。

  4、案例分析

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

  图5-10XX音乐排行榜

  2）具体实现步骤如下：

  a）定义有序列表

  。

  b）再有序列表

  中，定义五对<.li>列表项。

  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

  6

  7

  8

  9

  10

  1. 小苹果筷子兄弟

  11后会有期佚名

  12

  2. 因为爱情佚名

  13会不会佚名

  14

  3. 古柏佚名

  15

  16

  17

  2、定义CSS样式

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

  1

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

  图5-11XX音乐排行榜

  案例5-6制作简单的热点新闻板块

  一、案例描述

  1、考核知识点

  超链接标记

  2、练习目标

  Ø掌握超链接文本的定义方法

  Ø掌握无序列表的应用方法

  Ø掌握链接伪类的定义方法

  3、需求分析

  在制作网页时，为了增强网页的功能性，经常需要将列表和超链接配合使用，为了便于初学者的理解和掌握，接下来，通过一个制作热点新闻版块的案例做具体演示。

  4、案例分析

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

  图5-12热点新闻版块效果图

  2）具体实现步骤如下：

  a）定义新闻标题。

  b）定义水平线，并通过CSS设置水平线的样式。

  c）定义无序列表，并为列表项中的文本添加超链接属性，并定义链接伪类。

  d）为“马上注册”图片添加超链接属性。

  二、案例实现

  1、制作页面结构

  新建HTML页面，代码如下：

  1

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

  2"http:

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

  3

  4

  5

  6

  7

  8

  9

  10

  11

  搜狐热点新闻

  12

  13

  14

  • 铁道部千万天价宣传片调查：

    张艺谋酬劳250万

  15

  • 中国失独问题调查：

    不解决是对人民不负责

  16

  • 海军副司令：

    全国人民请放心海军必不辱使命

  17

  • 国内最赚钱炼油厂巨亏员工羞于穿工作服上街

  18

  • 北京公交车在闹市行驶中起火纵火犯被抓

  19

  • 韩国反朝名人欲诉中国政府称在华遭严刑逼供

  20

  • 20多位神秘人50万放生万条红鱼市民争相垂钓

  21

  • 晨报：

    朝鲜黑马爆冷夺冠称感谢金正日赐力量

  22

  23

  24

  25

  2、定义CSS样式

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

  1

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

  图5-13正常情况下的新闻链接板块

  当鼠标悬浮时，链接文本的颜色会发生改变，效果如图5-14所示。

  图5-14鼠标悬浮时的新闻链接板块

  案例5-7新浪导航栏

  一、案例描述

  1、考核知识点

  链接伪类

  2、练习目标

  Ø掌握超链接标记的创建方法

  Ø掌握链接伪类定义超链接的方法

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

  3、需求分析

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

  为了便于初学者的理解和掌握，接下来，通过一个新浪导航栏的案例做具体演示。

  4、案例分析

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

  图5-15新浪导航栏效果

  2）具体实现步骤如下：

  a）定义一个大盒子，对导航栏做整体控制。

  b）在大盒子内部嵌套一个小盒子，控制导航标题。

  c）为导航标题定义超链接。

  d）通过