《网页设计与制作(DIV+CSS)》实训指导书.doc

《网页设计与制作》（DIV+CSS） ? 上饶职业技术学院 ?信息工程系  目 录 实训1：从基础开始 1 实训2：摄影师个人网站布局 6 实训3：生物研究中心网站布局 10 实训4：教育公司网站布局 22 实训1： 实训名称： 成绩： 实训日期： 年 月 日 实训报告日期： 年 月 日 一、实训目的 1、掌握 CSS 2、掌握CSS。 二、实训内容 三、实训环境 Adobe Dreamweaver CS5 四、实训步骤、过程 1、动手体验CSS 首先建立HTML文件，构建最简单的页面框架，其内容包括标题和正文部分，每一个部分又分别处于不同的模块中，代码如下所示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title体验CSS/title link href=sheet1.css rel=stylesheet type=text/css / /head body h1畅思网络有限公司/h1 img src=Pictures/1.jpg width=128 height=128 p id=p1首先建立HTML文件，构建最简单的页面框架，其内容包括标题和正文部分，每一个部分又分别处于不同的模块中。/p p id=p2首先建立HTML文件，构建最简单的页面框架，其内容包括标题和正文部分，每一个部分又分别处于不同的模块中。/p /body/html 2、“交集”选择器 “交集”复合选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格，必须连续书写。举例代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title无标题文档/title style type=text/css !-- p{ color:blue; } p.special{ color:red; } .special{ color:#889900; } -- /style/head body p其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。/p h3其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。/h3 p class=special其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。/p h3 class=special其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。/h3 /body /html 运行效果如图1.1所示： 图1.1 标记、类别选择器示例 3、CSS的继承性 CSS的继承指的是子标记会继承你标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。举例代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title无标题文档/title style type=text/css h1{ color:blue; text-decoration:underline; } em{ color:#FF0000; } ul ul li{ font-weight:bold; } /style /head body h1前沿emWEB开发/em教室/h1 u