《《网页设计与制作（DIV+CSS）》实训指导书

《网页设计与制作》（DIV+CSS）

上饶职业技术学院 信息工程系

《《网页设计与制作（DIV+CSS）》实训指导书

目 录

实训1：从基础开始 ......................................................................... 1 实训2：摄影师个人网站布局 ......................................................... 6 实训3：生物研究中心网站布局 ................................................... 10 实训4：教育公司网站布局 ........................................................... 22

《《网页设计与制作（DIV+CSS）》实训指导书

实训1：从基础开始

实训名称： 成绩： 实训日期： 年 月 日 实训报告日期： 年 月 日

一、实训目的

1、掌握 CSS的各种选择器及其各自的使用方法； 2、掌握CSS的继承性与层叠特性以及它们的作用。

二、实训内容

实例制作

三、实训环境

Adobe Dreamweaver CS5

四、实训步骤、过程

1、动手体验CSS

首先建立HTML文件，构建最简单的页面框架，其内容包括标题和正文部分，每一个部分又分别处于不同的模块中，代码如下所示：

体验CSS

畅思网络有限公司

1

《《网页设计与制作（DIV+CSS）》实训指导书

正文部分，每一个部分又分别处于不同的模块中。

2、“交集”选择器

“交集”复合选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格，必须连续书写。举例代码如下：

无标题文档

其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。

其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。

2

《《网页设计与制作（DIV+CSS）》实训指导书

运行效果如图1.1所示：

图1.1 标记、类别选择器示例

3、CSS的继承性

CSS的继承指的是子标记会继承你标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。举例代码如下：

无标题文档

3

• 1
• 2
• 3
• 4
• >>
• 15