内容简介

DIV+CSS技术是目前最流行的网页制作技术。本书主要介绍了超文本标记语言HTML(HTML5)、CSS(CSS3)层叠样式表和JavaScript(jQuery)的基础知识和实际运用技术。通过实例的分析讲解了CSS语法、文字段落设置、背景图片设置以及CSS3新功能等。重点讲解了如何运用DIV+CSS进行网页布局，注重实际操作，使读者更好地掌握CSS技术及DIV+CSS布局的精髓。本书最后提供了两个常见类型的完整网页的综合实例，让读者进一步巩固所学的知识，提高综合应用的能力。

本书适合大中专院校计算机应用技术和电子商务类专业教材，也可作为社会上网页设计技术的培训教程，还可以作为广大Web网站开发人员、网页设计师、网页前端架构师、用户体验设计师的参考书。

 

本书配套有实例源代码及电子教案(PPT)。

 

第2版前言

　　本书多年来受到许多读者欢迎，非常荣幸。此次改版是基于网页设计技术的发展需要，增加了网页设计技术的最新内容，删减了一些不必要的内容。目前HTML5和CSS3是HTML和CSS的最新版本，现在它们仍处于发展阶段，但大部分主流浏览器都支持HTML5和CSS3技术。用DIV+ CSS3技术实现网页布局设计是网页前端设计的主流技术。网页前端三大技术是HTML、CSS和JavaScript(jQuery)。

　　本书作为网页设计技术教程，最重要的特色就是将复杂、难以理解的问题简单化，让读者轻松理解并掌握。与第1版相比，本书增加了HTML5、CSS3和jQuery知识，删减了只有IE浏览器有较好支持的CSS滤镜技术(CSS3技术可以很好地替代IE的CSS滤镜效果)。本书案例均采用HTML5技术标准编写。

　　全书共分9章。第1章介绍HTML与HTML5基础，重点介绍HTML基本用法及HTML5新特点及新加标签的使用。第2章介绍CSS基础和CSS3新功能，重点介绍CSS选择器和CSS及CSS3的应用。第3章介绍用CSS设置文字与背景，并介绍了一个综合设置文字及背景的实例。第4章介绍CSS的框模型与定位技术，重点介绍CSS框模型和CSS定位与浮动技术。第5章介绍DIV+CSS布局基础，重点介绍CSS排版观念和常见的DIV+CSS布局的样式的制作方法，并详细介绍两个DIV+CSS布局的例子。第6章介绍JavaScript基础，重点介绍JavaScript语法、内置对象、浏览器对象和JavaScript制作网页的一些特效应用。第7章介绍了CSS与jQuery的综合应用，重点介绍了jQuery基本语法、jQuery常用效果、jQuery遍历元素，并通过CSS3与jQuery结合的常用实例。第8章和第9章介绍了两个综合案例，分别介绍博客网站和公益网站首页的布局方法。

　　本书沿袭了第1版内容翔实、结构清晰、循序渐进，通过大量的技术应用实例深入讲解DIV+CSS布局方法的特点。书中精选的网页综合实例有很强的实际应用价值，大部分章节配备了习题和上机实训练习题，便于读者学习。

　　本书由黄玉春主编，王标为本书提供了部分案例。在本书编写的过程中，得到了不少专家和任课教师的大力支持，在此一并表示衷心的感谢。

　　

　　

　　编  者  

　　

　　

第1版前言

　　

　　随着Web 2.0标准的普及，网页标准化CSS+DIV的设计方式正逐渐取代传统的表格布局模式。采用CSS+DIV布局的优势主要体现在：能缩减页面代码，提高页面浏览速度；结构清晰，容易被搜索引擎搜索到，天生优化了SEO等方面。所以对CSS的学习是计算机应用技术人员从事网站设计的必修课程。

　　本书的定位是零基础学习CSS+DIV布局技术的大中专学生，也可用于帮助有表格布局基础的学生向CSS+DIV布局技术过渡，还可以作为工程技术人员的参考书。

　　全书共分9章。第1章介绍HTML和XHTML基础，重点介绍HTML基本用法及如何转换现有的文档为XHTML。第2章介绍CSS基础，重点介绍CSS选择器和CSS的引用。第3章介绍用CSS设置文字与背景。第4章介绍CSS滤镜的应用，重点介绍视觉滤镜和转换滤镜。第5章介绍CSS框模型与定位技术，重点介绍CSS框模型和CSS定位与浮动技术。第6章介绍DIV+CSS布局基础，重点介绍CSS排版观念和常见的CSS+DIV布局的样式的制作方法，并详细介绍两个CSS+DIV布局的例子。第7章介绍CSS与JavaScript的综合应用，重点介绍JavaScript语法、内置对象、浏览器对象和用CSS结合JavaScript制作网页的一些特效应用。第8章和第9章介绍两个综合案例，分别介绍博客网站和企业网站的布局方法。

　　本书内容翔实、结构清晰、循序渐进，通过大量的技术应用实例深入讲解CSS+DIV布局方法。书中精选的网页综合实例有很强的实际应用价值，大部分章节配备了习题和上机实训练习题，便于读者学习。

　　本书由黄玉春编写，王标为本书提供了部分案例。在本书编写的过程中，得到了不少专家和任课教师的大力支持，在此一并表示衷心的感谢。

 

 

 

编  者  

 

 

目    录

 

第1章  HTML与HTML5基础 1

1.1  HTML的基本用法 1

1.1.1  HTML文档的基本结构 1

1.1.2  常用的HTML标记 3

1.2  升级到XHTML 18

1.2.1  为什么要升级HTML 18

1.2.2  XHTML与HTML比较 19

1.2.3  如何转换现有的文档

为XHTML 21

1.3  HTML5概述 22

1.3.1  HTML5的发展历程 22

1.3.2  HTML5的优势 23

1.3.3  HTML5的新元素 24

习题1 25

上机实验1 29

第2章　CSS与CSS3基础 30

2.1  CSS的基本概念和特点 30

2.1.1  CSS的基本概念 30

2.1.2  CSS的特点 31

2.2  CSS选择器 31

2.2.1  CSS样式规则的定义 31

2.2.2  标记选择器 32

2.2.3  CSS选择器分组 32

2.2.4  派生选择器 32

2.2.5  id选择器 33

2.2.6  类选择器 34

2.2.7  伪类选择器 34

2.3  CSS的引用 35

2.3.1  内部样式表 35

2.3.2  外部样式表 36

2.3.3  内联样式表 37

2.3.4  输入样式表 38

2.3.5  多重样式表 39

2.4  CSS的继承 41

2.4.1  CSS的继承关系 41

2.4.2  CSS继承的应用 42

2.5  CSS3简介 43

2.5.1  CSS3的边框 43

2.5.2  CSS3的渐变 45

2.5.3  CSS3的其他常用属性 47

习题2 49

上机实验2 50

第3章  用CSS设置文字与背景 51

3.1  CSS的文字与段落样式 51

3.1.1  CSS的文字样式 51

3.1.2  CSS的段落文字 57

3.1.3  CSS的列表 61

3.2  CSS的颜色与背景样式 65

3.2.1  设置颜色 65

3.2.2  设置背景图像 68

3.2.3  背景图像的重复方式 69

3.2.4  固定背景图像 72

3.2.5  背景图片位置 73

3.2.6  背景样式的缩写 75

3.3  综合实例 76

3.3.1  文字的综合应用 76

3.3.2  背景的综合应用 79

习题3 81

上机实验3 83

第4章  CSS的框模型与定位 84

4.1  CSS的框模型 84

4.1.1  CSS的框模型概述 84

4.1.2  CSS的内边距 86

4.1.3  CSS的边框 88

4.1.4  CSS的外边距 96

4.1.5  外边距合并 99

4.2  CSS的定位和浮动 101

4.2.1  块级元素 101

4.2.2  CSS的定位机制 102

4.2.3  相对定位 102

4.2.4  绝对定位 105

4.2.5  z-index空间位置 107

4.2.6  CSS的浮动 109

4.3  CSS的定位实例 116

习题4 120

上机实验4 121

第5章  DIV+CSS布局基础 122

5.1  div标记与span标记 122

5.1.1  div标记与span标记概述 122

5.1.2  <div>与<span>标记的区别 124

5.2  CSS的排版观念 125

5.2.1  将页面用div分块 125

5.2.2  设计各块的位置 126

5.2.3  用CSS定位 127

5.3  固定宽度且居中的版式 128

5.3.1  一列固定宽度居中 129

5.3.2  二列固定宽度居中 130

5.4  自适应宽度且居中的版式 132

5.4.1  一列自适应宽度且居中 132

5.4.2  二列宽度自适应 134

5.4.3  左列固定，右列宽度

自适应 135

5.4.4  三列浮动中间列宽度

自适应 137

5.5  一个常用的DIV+CSS网站布局的

基本框架结构实例 140

5.5.1  搭建框架 140

5.5.2  添加CSS样式 141

5.6  排版实例：淘宝商城 143

5.6.1　搭建HTML框架 144

5.6.2　添加CSS样式 148

5.6.3　采用CSS+DIV布局的

优势 150

习题5 150

上机实验5 151

第6章  JavaScript脚本语言 153

6.1  JavaScript概述 153

6.1.1  JavaScript简介 153

6.1.2  JavaScript的特点 154

6.1.3  在网页中使用JavaScript 154

6.2  JavaScript的语法基础 156

6.2.1  JavaScript的数据类型 156

6.2.2  常量、变量与表达式 156

6.2.3  函数的定义及调用 159

6.2.4  条件分支语句 161

6.2.5  循环控制语句 163

6.3  JavaScript的内置对象 165

6.3.1  String对象 165

6.3.2  Math对象 168

6.3.3  Array对象 169

6.3.4  Date对象 171

6.4  浏览器对象 173

6.4.1  浏览器对象简介 173

6.4.2  window对象 175

6.4.3  document 对象 180

6.5  JavaScript的事件处理 181

6.5.1  事件及响应方法 181

6.5.2  document的常用事件 183

习题6 185

上机实验6 188

第7章  CSS与jQuery的整合使用 192

7.1  jQuery概述 192

7.1.1  jQuery简介 192

7.1.2  在网页中使用jQuery 193

7.1.3  jQuery的选择器 193

7.1.4  jQuery的事件 194

7.1.5  jQuery效果实例 196

7.1.6  jQuery与HTML的关联 206

7.1.7  jQuery的遍历 211

7.2  CSS3与jQuery整合实例 216

7.2.1  实例一：图片的轮播效果 216

7.2.2  实例二：下拉菜单的制作 220

7.2.3  实例三：标签网页的制作 224

习题7 226

上机实验7 228

第8章  整合案例一：我的博客 230

8.1  分析架构 230

8.1.1  设计分析 230

8.1.2  排版架构 231

8.2  模块设计 232

8.2.1  导航与Banner 232

8.2.2  左侧列表 233

8.2.3  内容部分 235

8.2.4  footer脚注 237

8.3  整体调整 237

8.4  网页源码 238

第9章  整合案例二：公益网站首页 245

9.1  分析架构 245

9.1.1  设计分析 246

9.1.2  排版架构 246

9.2  模块设计 247

9.2.1  导航与logo 247

9.2.2  banner部分 249

9.2.3  内容主体部分 249

9.2.4  图片导航部分 251

9.2.5  footer脚注 252

9.3  整体调整 253

9.4  网页源码 254

上机实验9 263

习题答案 265

参考文献 268