精通CSS+DIV 100%网页样式与布局密码PDF电子书下载

第1篇CSS基础篇 2

第1章 CSS的初步体验 2

1.1 CSS的概念 3

1.1.1 网页中标记的概念 3

1.1.2 HTML与CSS的优缺点 5

1.1.3 浏览器对CSS的支持 7

1.2 网页设计中的CSS 8

1.2.1 CSS能做什么 8

1.2.2 CSS的局限性是什么 9

1.3 网站CSS赏析 9

1.3.1 案例1——商务网站CSS样式赏析 9

1.3.2 案例2——游戏网站CSS样式赏析 10

1.4 编写我的第一个CSS样式 10

1.4.1 从零开始 11

1.4.2 加入图片 13

1.4.3 加入CSS代码控制图片 14

1.4.4 CSS的注释 14

1.5 CSS语法书写标准及功能 15

1.5.1 规则块 15

1.5.2 ＠规则 15

1.5.3 规则集 17

1.5.4 关键字 17

1.5.5 字符串 18

1.5.6 CSS样式标准 19

高手私房菜 19

技巧：Dreamweaver的多种视图方式 19

第2章 CSS样式核心基础 21

2.1 使用CSS选择器 22

2.1.1 标记选择器 22

2.1.2 类别选择器 23

2.1.3 ID选择器 26

2.2 在HTML中调用CSS的方法 27

2.2.1 直接定义CSS样式 27

2.2.2 内嵌式CSS样式 28

2.2.3 链接式CSS样式 29

2.2.4 导入外部CSS样式 31

2.2.5 CSS样式生效的优先级 33

高手私房菜 33

技巧1：使用图形工具创建CSS样式 33

技巧2： CSS字体属性简写规则 34

第3章 网页样式代码的生成方法 35

3.1 从零开始手工编写 36

3.1.1 手工编写HTML文件 36

3.1.2 控制网页内容显示 38

3.2 完整网页代码分析 39

3.2.1 获取网页代码 40

3.2.2 查看网页样式代码 40

3.3 使用Dreamweaver辅助工具创建页面 41

3.4 在Dreamweaver中新建CSS样式 41

3.5 在Dreamweaver中编辑CSS样式 44

3.6 为图像创建CSS样式 45

高手私房菜 46

技巧：复制和粘贴文本的方式 46

第4章 用CSS设置文本样式 47

4.1 样式的参数单位 48

4.2 设置网页文本的基本样式 51

4.2.1 网页文本颜色的定义 51

4.2.2 网页文本字体的定义 52

4.2.3 设置具体文字的字体 54

4.2.4 设置文字的倾斜效果 55

4.2.5 设置文字的加粗效果 56

4.3 设置网页文本的行高与间距 57

4.3.1 设置网页文字的间距 58

4.3.2 设置网页文字行间距 59

4.3.3 设置网页文字段落间距 60

4.4 设置网页文本的对齐方式 61

4.4.1 设置文本的水平对齐方式 62

4.4.2 设置文本的垂直对齐方式 63

4.5 设置文字与背景的颜色 64

4.5.1 使用样式参数进行设置 64

4.5.2 更简洁的解决方案 66

4.6 设置其他网页文本样式 68

4.6.1 英文字母大小写自动转换效果 68

4.6.2 网页文字的装饰效果 69

4.6.3 段落首行缩进效果 70

高手私房菜 72

技巧：标题的图像替换 72

第5章 用CSS设置网页图像特效 73

5.1 设置图片边框 74

5.1.1 图片边框的基本属性 74

5.1.2 为不同的边框分别设置样式 75

5.2 图片缩放功能的实现 77

5.3 图文混排 79

5.3.1 文字环绕 79

5.3.2 设置图片与文字的间距 81

5.4 案例——个人养生网页 83

5.5 设置图片与文字的对齐方式 85

5.5.1 横向对齐方式 85

5.5.2 纵向对齐方式 87

高手私房菜 89

技巧1：解决在浏览器中图片无法显示的问题 89

技巧2：解决图片超出撑破DIV的问题 90

第6章 用CSS设置网页背景颜色与背景图像 91

6.1 设置背景颜色 92

6.2 设置背景图像 93

6.3 设置背景图像平铺 94

6.4 设置背景图像位置 96

6.5 设置固定的背景图像位置 99

6.6 设置图像替换标题 100

6.7 设置滑动门效果的标题 102

高手私房菜 104

技巧：网页文字颜色的搭配技巧 104

第7章 掌握CSS的高级特性 105

7.1 复合选择器 106

7.1.1 “交集”选择器 106

7.1.2 “并集”选择器 107

7.1.3 后代选择器 109

7.2 CSS的继承特性 110

7.2.1 继承关系 110

7.2.2 CSS继承的运用 112

7.3 CSS的层叠特性 113

高手私房菜 116

技巧1：继承性 116

技巧2：组选择器 116

第2篇CSS+DIV美化和布局篇 118

第8章 CSS定位与DIV布局核心技术 118

8.1 块级元素和行内级元素 119

8.1.1 块级元素和行内级元素的不同 119

8.1.2 DIV元素和Span元素 121

8.2 使用DIV标记与span标记布局网页级元素 122

8.3 盒子模型 124

8.3.1 盒子模型的概念 124

8.3.2 网页border区域定义 125

8.3.3 网页padding区域定义 128

8.3.4 网页margin区域定义 130

8.4 box类型和display属性 131

8.4.1 HTML元素默认的box类型 132

8.4.2 块级元素和块级box 133

8.4.3 行内级元素和行内级box 133

8.4.4 插入式box 134

8.5 可视性 135

8.6 案例1——图文层叠效果 137

8.7 案例2——歌曲编辑列表 140

高手私房菜 142

技巧1：什么时候使用Visibility或者Display属性 142

技巧2： CSS border的默认值 142

第9章 CSS+DIV盒子的浮动与定位 143

9.1 定义DIV 144

9.1.1 什么是DIV 144

9.1.2 插入DIV 144

9.1.3 DIV的嵌套和固定格式 146

9.2 CSS布局定位 146

9.2.1 浮动定位 147

9.2.2 position定位 149

9.3 盒子的浮动 151

9.4 盒子的定位 153

9.4.1 静态定位 154

9.4.2 相对定位 154

9.4.3 绝对定位 156

9.4.4 固定定位 157

9.5 可视化盒模型 157

9.5.1 盒子模型 157

9.5.2 视觉可视化模型 158

9.5.3 空白边叠加 158

9.6 固定宽度网页剖析与布局 159

9.6.1 网页单列布局模式 160

9.6.2 网页1-2-1型布局模式 164

9.6.3 网页1-3-1型布局模式 169

9.6.4 网页1-（（1-2）+1）-1型布局模式 171

9.7 自动缩放网页剖析与布局 174

9.7.1 网页1-2-1型布局模式 174

9.7.2 网页1-3-1型布局模式 176

9.7.3 变宽布局方法总结 178

9.7.4 分列布局背景色的设置 178

高手私房菜 180

技巧1：CSS在容器内定位 180

技巧2：框架中百分比的关系 180

第10章 CSS+DIV美化与布局实战 181

10.1 框架搭建 182

10.2 案例1——企业门户网站 183

10.2.1 设计分析 183

10.2.2 布局分析 183

10.2.3 制作步骤 183

10.3 案例2——时政新闻网站 196

10.3.1 设计分析 196

10.3.2 布局分析 196

10.3.3 制作步骤 197

高手私房菜 201

技巧1：控制网页背景颜色 201

技巧2：控制网页背景图片以及显示方式 202

第3篇综合应用篇 204

第11章CSS滤镜的综合应用 204

11.1使用CSS滤镜 205

11.1.1 Alpha滤镜（透明度滤镜） 205

11.1.2 Blur滤镜（模糊滤镜） 208

11.1.3 MotionBlur滤镜（运动模糊滤镜） 209

11.1.4 Dropshadow滤镜（阴影滤镜） 211

11.1.5 Shadow滤镜（文字阴影滤镜） 212

11.1.6 Flip滤镜（翻转滤镜） 213

11.1.7 Glow滤镜（光晕滤镜） 215

11.1.8 Gray滤镜（灰度滤镜） 216

11.1.9 Invert滤镜（可视化属性翻转滤镜） 217

11.1.10 Xray滤镜（X光滤镜） 218

11.1.11 Mask滤镜（遮罩滤镜） 219

11.1.12 Wave滤镜（波浪滤镜） 221

11.2 CSS 3中其他模块的新增属性 222

11.2.1@media 222

11.2.2 Columns 224

11.2.3@font-face 226

11.2.4 Speech 226

11.3案例1——制作商务类网站 228

11.3.1设计分析 228

11.3.2制作步骤 228

11.4案例2——制作娱乐类网站 234

11.4.1案例分析 234

11.4.2制作步骤 234

高手私房菜 240

技巧：使用滤镜控制图片的颜色变化 240

第12章 CSS3与HTML的综合应用 241

12.1使用CSS滤镜 242

12.1.1 HTML基本结构 242

12.1.2 HTML基本语法 243

12.2 CSS3与HTML的结合 244

12.3 案例1——渐变式数据表 245

12.4 案例2——浮雕式链接特效 246

12.5 案例3——网页文字阴影特效 248

12.6 案例4——古文诗画特效 249

高手私房菜 252

技巧1：图片的标题 252

技巧2：去掉了CSS标签的type属性 252

第13章 CSS 3与JavaScript的综合应用 253

13.1 JavaScript概述 254

13.1.1 HTML基本结构 254

13.1.2 JavaScript的应用范围 255

13.2 JavaScript的语法基础 255

13.2.1 JavaScript的基本架构 256

13.2.2 JavaScript的基本语法 257

13.2.3 数据类型和变量 257

13.2.4 表达式和运算符 258

13.2.5 基本语句 260

13.3 应用Spry构件 262

13.3.1 HTML基本结构 262

13.3.2 插入Spry菜单 263

13.3.3 插入Spry选项卡式面板 264

13.3.4 插入Spry折叠式构件 264

13.3.5 插入Spry可折叠面板 264

13.4 案例1——在网页中应用Spry构件 265

13.4.1 设计分析 265

13.4.2 制作步骤 265

13.4.3 案例总结 267

13.5 案例2——制作婚纱摄影网站 267

13.5.1 案例分析 267

13.5.2 制作步骤 268

13.5.3 案例总结 273

高手私房菜 274

技巧：制作弹出信息窗口 274

第14章 CSS 3与jQuery的综合应用 275

14.1 jQuery基础 276

14.1.1 认识jQuery 276

14.1.2 jQuery的优势 276

14.2 jQuery代码的编写 277

14.2.1 搭建jQuery环境 277

14.2.2 编写简单的jQuery功能代码 278

14.2.3 jQuery代码规范 280

14.3 jQuery对象 280

14.3.1 jQuery对象简介 281

14.3.2 jQuery对象的应用 281

14.4 案例——制作幻灯片 282

14.4.1 设计分析 282

14.4.2 制作步骤 283

14.4.3 案例分析 285

高手私房菜 285

技巧1：直接使用谷歌和微软的服务器上的jQuery 285

技巧2：获取最新的Google CDN 286

第5章 CSS 3与XML的综合应用 287

15.1 XML基础 288

15.1.1 XML的特点 288

15.1.2 XML与HTML 290

15.1.3 XML基本语法 292

15.1.4 格式正确的XML文档 294

15.2 XML与CSS的链接 294

15.2.1 使用xml ： stylesheet指令 294

15.2.2 使用＠import指令 297

15.3 XML与CSS的应用 297

15.3.1 显示学生信息 297

15.3.2 实现隔行变色的表格 299

15.4 案例1——在HTML页面中调用XML数据 302

15.4.1 设计分析 302

15.4.2 制作步骤 302

15.5 案例2——制作企业网站 304

15.5.1 设计分析 304

15.5.2 制作步骤 304

高手私房菜 306

技巧：XML转义字符 306

第16章 CSS与Ajax的综合应用 307

16.1 Ajax简介 308

16.1.1 Ajax的关键元素 309

16.1.2 Ajax的优势 309

16.1.3 实现Ajax的步骤 310

16.1.4 使用CSS的必要性 310

16.2 Ajax应用 310

16.2.1 创建XMLHttpRequest对象 310

16.2.2 发出Ajax请求 311

16.2.3 处理服务器响应 312

16.2.4 使用CSS样式 313

16.3 案例1——使用Ajax实现页面特效 314

16.3.1 设计分析 314

16.3.2 制作步骤 314

16.4 案例2——实现可拖动DIV块 317

16.4.1 设计分析 317

16.4.2 制作步骤 317

高手私房菜 323

技巧1：编码问题 323

技巧2： IE下的reponseXML问题 324

第4篇实战篇 326

第17章 购物类网站布局分析 326

17.1 淘宝网整体布局分析 327

17.1.1 整体设计分析 327

17.1.2 排版架构分析 328

17.2 制作自己的网站——图书购物网站 332

17.2.1 版面架构分析 333

17.2.2 网站模块组成 334

高手私房菜 340

技巧：固定宽度汉字（词）折行 340

第18章 社交类网站布局分析 341

18.1 开心网整体布局 342

18.1.1 布局结构分析 342

18.1.2 版面架构分析 343

18.1.3 模块组成 343

18.2 制作自己的网站——社交网站 345

18.2.1 版面架构分析 345

18.2.2 网站模块组成 346

高手私房菜 350

技巧：如何减小CSS体积 350