CSS从入门到精通PDF电子书下载

第一篇 基础知识篇 2

第1章 与网页有关的基本概念 2

1.1网页的基本构成 2

1.2网页的结构设计——HTML与XHTML 3

1.2.1认识HTML 3

1.2.2认识XHTML 4

1.2.3制作一个简单的XHTML网页 5

1.2.4 XHTML的优势 5

1.3 CSS入门 6

1.3.1感性体验CSS的魅力 6

1.3.2 CSS的概念 8

1.3.3 CSS的特点 9

1.3.4 CSS的优势 9

1.3.5发挥CSS的优势 10

1.4 Web标准 11

1.4.1什么是Web标准 12

1.4.2 Web标准的构成 12

1.4.3 Web标准的表现层技术 13

1.5使用CSS+DIV建设网站 13

1.5.1 CSS+DIV的含义 13

1.5.2 CSS+DIV网站设计的优势 13

1.6小结 14

1.7习题 15

第2章CSS基础知识 16

2.1 CSS的基本语法 16

2.1.1 CSS的基本语法构成 16

2.1.2一个CSS样式的简单实例 16

2.2 CSS的选择符 18

2.2.1类型选择符 18

2.2.2群组选择符 18

2.2.3包含选择符 18

2.2.4 id、 class选择符 19

2.2.5标签指定式选择符 20

2.2.6组合选择符 20

2.2.7伪类和伪对象 21

2.2.8通配选择符 21

2.3 CSS的常用属性及属性值 22

2.3.1 color颜色属性 22

2.3.2常用的CSS长度单位 23

2.3.3百分比值 24

2.3.4 URL路径 24

2.4 CSS的继承性 25

2.5 CSS的添加方法 26

2.5.1在XHTML标识符里添加CSS 26

2.5.2在XHTML头信息标识符＜head＞里添加CSS 26

2.5.3链接样式表 27

2.5.4联合使用样式表 28

2.6 CSS的开发环境 29

2.6.1编辑软件 29

2.6.2浏览软件 30

2.7小结 31

2.8习题 32

第3章XHTML与JavaScript基础 33

3.1 XHTML基础知识 33

3.1.1 XHTML的格式文件 33

3.1.2 XHTML基本结构 34

3.1.3 XHTML网页实例 37

3.2 XHTML的语法构成 38

3.2.1 XHTML中的标签 38

3.2.2 XHTM L的标签属性 39

3.3 XHTML的语法规范 39

3.3.1标签不能重叠，可以嵌套 39

3.3.2 XHTML文件一定要有正确的组织格式 40

3.3.3标签名字一定要用小写字母 40

3.3.4所有的XHTML元素一定要关闭 41

3.3.5独立的一个标签也要用来结束 41

3.4 div标签 41

3.4.1什么是div 41

3.4.2理解div 42

3.4.3使用div 43

3.4.4 div的并列与嵌套 44

3.5 span标签 44

3.5.1什么是span 45

3.5.2 span与div的区别 45

3.6 h1至h6标签 46

3.7列表制作标签ul、 ol、li 46

3.7.1 ul无序列表 47

3.7.2 ol有序列表 48

3.8 p标签和br标签 48

3.8.1 p标签 48

3.8.2 br标签 49

3.9 img标签 49

3.9.1 img标签的属性 49

3.9.2 img标签使用方法 50

3.10表单标签 50

3.10.1 form标签 50

3.10.2 input标签 51

3.10.3分组标签fiieldset、 legend 53

3.11 JavaScript简介 53

3.12 JavaScript语言基础 54

3.12.1插入JavaScript 55

3.12.2基本语法 55

3.12.3变量和数据类型 56

3.12.4语句 57

3.13 JavaScript的对象及其属性和方法 60

3.14事件处理 61

3.14.1事件处理的类型 61

3.14.2指定事件处理 61

3.15 小结 62

3.16习题 63

第4章 浏览器的兼容与解析问题 65

4.1兼容问题的由来 65

4.2需要兼容的常用浏览器 65

4.3 CSS hack技术 66

4.3.1什么是CSS hack 66

4.3.2使用CSS hack 67

4.4常用CSS hack方法介绍 68

4.4.1屏蔽IE 6浏览器 68

4.4.2仅IE 7识别 68

4.4.3仅IE 6识别 69

4.4.4仅IE识别 70

4.4.5兼容IE 6、 IE 7、 Firefox浏览器 70

4.5 CSS hack管理 72

4.6 IE条件注释功能 73

4.7小结 73

4.8习题 74

第二篇 实例制作篇 76

第5章 使用CSS制作背景 76

5.1制作背景颜色 76

5.2给元素添加背景图片 78

5.2.1指定背景图像 78

5.2.2制作重复的背景图像 80

5.3制作不动的背景 81

5.4给网页添加背景 84

5.5制作滚动页面的背景 85

5.6综合使用背景 86

5.7小结 87

5.8习题 88

第6章 使用CSS布局页面顶部内容 89

6.1制作包含文本logo的页面顶部 89

6.2制作包含图像logo的页面顶部 91

6.2.1制作实例 92

6.2.2兼容问题 94

6.3制作包含文本banner的页面顶部 95

6.3.1图片10g0的定位 96

6.3.2定义快捷方式的文本样式 98

6.3.3定义段落文本banner样式 100

6.4制作包含图像banner的页面顶部 101

6.5小结 105

6.6习题 106

第7章 使用CSS制作网站导航 107

7.1制作一个简单的横向文字导航条 107

7.2制作方块导航条 110

7.3制作标签式导航 112

7.4制作按钮导航条 115

7.5 CSS盒模型及盒模型hack 118

7.5.1盒模型尺寸 118

7.5.2盒模型hack 120

7.5.3简单盒模型hack方法 121

7.6制作会动的长城形导航条 121

7.7制作基于背景控制的导航条 126

7.8制作左右自由伸展的导航条 129

7.8.1九宫格技术原理 129

7.8.2制作自由伸展的导航条实例 132

7.9制作一个简单的纵向导航条 134

7.9.1使用ul、li列表标签制作导航条 134

7.9.2使用div+hl标签制作 135

7.10制作分行导航条 137

7.11制作增亮导航条 139

7.12制作动感的导航条 141

7.13制作下拉式导航条 144

7.13.1制作实例 145

7.13.2兼容问题 147

7.14制作多级弹出导航条 149

7.14.1制作实例 149

7.14.2兼容问题 153

7.15 小结 154

7.16习题 155

第8章 使用CSS制作列表 156

8.1制作新闻列表 156

8.1.1制作实例 157

8.1.2兼容问题 159

8.2制作排行榜 160

8.3制作自定义图片项目符号的列表 163

8.3.1使用列表符号样式属性制作列表 164

8.3.2使用背景图片属性制作列表符号 166

8.3.3兼容问题 167

8.4使用CSS改变列表排版 168

8.5列表缩进排版 171

8.5.1制作实例 171

8.5.2兼容问题 174

8.6复杂列表排版 175

8.6.1 overflow属性语法结构 176

8.6.2制作实例 176

8.6.3兼容问题 181

8.7小结 183

8.8习题 184

第9章 使用CSS制作表单 185

9.1制作登录表单 185

9.1.1 label标签语法结构 186

9.1.2制作登录表单实例 186

9.1.3兼容问题 189

9.2制作用户注册表单 190

9.2.1制作页面的XHTML代码 191

9.2.2制作页面的CSS样式 193

9.3制作符合W3C标准的表单 196

9.3.1制作页面的XHTML代码 197

9.3.2制作页面的CSS样式 200

9.3.3兼容问题 204

9.4小结 205

9.5习题 205

第10章 使用CSS制作内容的版式 206

10.1制作分栏的文字排版 206

10.2制作图文混合排版 208

10.2.1图文混排基本方式 208

10.2.2制作网站图文混排版式的实例 209

10.3制作全图排版的实例 212

10.3.1自由浮动布局 213

10.3.2其他显示方式布局 216

10.4小结 218

10.5习题 218

第11章 使用CSS制作链接样式 219

11.1制作Windows风格样式的CSS按钮 219

11.1.1仿Windows经典样式的CSS按钮 219

11.1.2仿Windows XP风格的CSS按钮 220

11.2制作仿按钮下陷效果的实例 221

11.3面包屑导航链接 222

11.3.1制作实例 223

11.3.2兼容问题 225

11.4小结 226

11.5习题 226

第12章 使用CSS制作数据表格 227

12.1制作基本的数据表格 227

12.1.1表示数据的表格对象标签 227

12.1.2使用表格标签制作表格 227

12.1.3使用CSS修饰表格样式 229

12.2制作CSS风格的数据表格 232

12.2.1表格对象标签属性 232

12.2.2 CSS属性text-transform 233

12.2.3制作数据表格实例 233

12.3小结 238

12.4习题 239

第13章 使用CSS制作页面底部内容 240

13.1制作文本信息的页面底部内容 240

13.1.1 a标签的title属性 240

13.1.2制作包含文本信息的页面底部XHTML结构代码 240

13.1.3制作页面的CSS样式 241

13.1.4兼容问题 244

13.2制作包含导航链接的页面底部内容 245

13.2.1制作包含导航链接页面底部的XHTML代码结构 245

13.2.2制作页面的CSS样式 246

13.3制作包含图像友情链接的页面底部内容 250

13.3.1制作页面底部的XHTML结构 250

13.3.2制作页面的CSS样式 251

13.4小结 253

13.5习题 254

第三篇 整体布局篇 256

第14章CSS基本布局 256

14.1一列固定宽度 256

14.2一列宽度自适应 258

14.3一列居中 259

14.4二列固定宽度 260

14.5二列宽度自适应 262

14.6两列右列宽度自适应 263

14.7两列固定宽度居中 264

14.8三列浮动中间列宽度自适应 266

14.9高度自适应 268

14.10小结 270

14.11习题 270

第15章CSS整体布局的实现 271

15.1顶行三列布局的实现 271

15.1.1制作思路 272

15.1.2制作顶部三列式布局实例 272

15.2多区域不规则布局 274

15.2.1制作思路 275

15.2.2制作多区域不规则布局的实例 276

15.3小结 279

15.4习题 280

第16章 使用Dreamweaver制作页面的实例 281

16.1框架设计 281

16.1.1页面分析 282

16.1.2框架制作 282

16.1.3切图 285

16.2布局设计 288

16.2.1页面顶部布局设计 288

16.2.2页面中上部的布局设计 290

16.2.3页面中下部的布局设计 293

16.2.4页面底部的布局设计 296

16.3模块设计 298

16.3.1快速导航制作 298

16.3.2“面包屑”制作 300

16.3.3数据表格制作 302

16.3.4图片排版 304

16.4兼容性测试 306

16.5小结 309

16.6习题 310

第四篇 综合应用篇 312

第17章 博客类网页布局设计 312

17.1页面布局和规划 313

17.1.1界面设计分析 313

17.1.2规划页面布局 313

17.2 CSS结构设计与整体布局设计 314

17.2.1 CSS结构设计 314

17.2.2整体布局设计 316

17.3页面头部布局设计 319

17.3.1制作头部的结构代码 319

17.3.2编写头部的CSS代码 320

17.4日志部分的布局设计 322

17.4.1制作日志部分的结构代码 322

17.4.2编写日志部分的CSS代码 323

17.5边栏区域的布局设计 326

17.5.1制作边栏区域的结构代码 326

17.5.2编写右边栏区域的CSS代码 327

17.6页面底部的布局设计 329

17.6.1制作底部的结构代码 330

17.6.2编写底部的CSS代码 330

17.7小结 331

第18章 企业类网页布局设计 332

18.1页面布局和规划 332

18.1.1界面设计分析 332

18.1.2规划页面布局 334

18.2 CSS结构设计与整体布局设计 334

18.2.1 CSS文件结构设计 335

18.2.2首页布局设计 335

18.3页面头部布局设计 338

18.3.1制作头部的结构代码 338

18.3.2编写头部的CSS样式 338

18.4页面banner区域的布局设计 339

18.4.1制作banner区域主体的布局设计 339

18.4.2制作banner区域各个元素的布局设计 341

18.5页面主内容区的布局设计 346

18.5.1制作页面主内容区结构 346

18.5.2编写CSS样式 347

18.6频道页面布局设计概述 350

18.7小结 351