DIV+CSS网页样式与布局实战详解

第1篇 DIV+CSS 布局速成

第1章 Web标准语言（教学视频：34分钟）

1.1 Web语言简介 2

1.1.1 结构标准语言 2

1.1.2 表现标准语言 5

1.1.3 行为标准语言 6

1.2 开发工具 7

1.2.1 如何编写CSS代码 7

1.2.2 Dreamweaver简介 7

1.2.3 Dreamweaver代码编写 9

第2章 CSS入门与速成（教学视频：46分钟）

2.1 开始CSS之旅 12

2.1.1 什么是CSS 12

2.1.2 编写一个CSS 12

2.2 CSS的组成 15

2.2.1 选择符 15

2.2.2 属性 17

2.2.3 属性值 17

2.3 CSS的位置 18

2.3.1 属性样式表 18

2.3.2 内部样式表 19

2.3.3 链接样式表 20

2.3.4 导入样式表 21

第3章 CSS文字样式设计与速成（教学视频：65分钟）

3.1 CSS 3文字样式 23

3.1.1 字体 23

3.1.2 大小 25

3.1.3 类型 27

3.1.4 粗细 29

3.1.5 颜色 31

3.1.6 小型大写字体 33

3.1.7 链接 34

3.1.8 布局 36

3.1.9 文字阴影 42

3.1.10 文字变换速度控制 45

3.1.11 文字大小变化 48

3.2 文字示例一：新闻摘要 50

3.2.1 新闻摘要的DIV布局设计 50

3.2.2 新闻简要的CSS样式设计 50

3.3 文字示例二：个人简介页面布局 52

3.3.1 整体DIV布局设计 52

3.3.2 添加CSS样式 53

3.4 文字示例三：会移动的文字 54

3.4.1 方法1：使用JavaScript控制 55

3.4.2 方法2：使用marquee标签控制 56

3.5 文字示例四：文字阴影效果 57

3.5.1 方法1：使用CSS定位技术 57

3.5.2 方法2：使用CSS 3特有属性 59

第4章 CSS图像样式设计与速成（教学视频：54分钟）

4.1 背景 60

4.1.1 颜色 60

4.1.2 图片 63

4.1.3 排布 65

4.1.4 位置控制 66

4.1.5 滚动控制 68

4.1.6 线性渐变 69

4.2 动漫游戏网站主题背景 72

4.3 图片 76

4.3.1 边框 76

4.3.2 缩放 78

4.3.3 透明效果 80

4.3.4 图片布局 81

4.4 图片示例一：浮动相架 83

4.4.1 使用DIV控制布局 83

4.4.2 添加CSS图片样式 84

4.4.3 添加JavaScript控制 84

4.5 图片示例二：大小会变化的图片 86

4.5.1 使用CSS 3特有属性 86

4.5.2 使用JavaScript控制 88

4.6 图片示例三：CSS 3图片旋转 90

第5章 CSS表格样式设计与速成（教学视频：30分钟）

5.1 表格 92

5.1.1 背景 92

5.1.2 边框 94

5.1.3 边距 97

5.1.4 表格的嵌套 99

5.1.5 跨行、列表格项 101

5.1.6 表格项斜角 101

5.2 表格示例一：成绩单设计 104

5.3 表格示例二：用DIV制作表格 106

5.4 表格示例三：仿Apple风格样式表格 108

5.5 表格示例四：添加Hover事件响应控制 110

第6章 CSS列表样式设计与速成（教学视频：41分钟）

6.1 列表 112

6.1.1 列表的方向 112

6.1.2 列表图标 118

6.1.3 列表的层次 124

6.2 列表示例一：杂志目录排版 128

6.2.1 标题设计DIV布局 128

6.2.2 目录元素添加CSS样式 131

6.3 列表示例二：用DIV实现列表 133

6.3.1 DIV的摆放 133

6.3.2 DIV模仿简单列表 136

6.4 列表示例三：列表摆放——我的微空间画册 138

6.5 列表示例四：列表动态显示——商品列表 141

6.5.1 商品列表的框架设计 141

6.5.2 为列表添加CSS和JavaScript控制 143

第7章 CSS表单样式设计与速成（教学视频：58分钟）

7.1 表单的作用 146

7.1.1 表单的重要性 146

7.1.2 简单的表单功能提交单 148

7.2 表单的样式 150

7.2.1 基本元素 150

7.2.2 背景 156

7.2.3 边框 161

7.2.4 布局 167

7.3 表单示例一：用户注册界面设计 175

7.4 表单示例二：问卷调查表单设计 179

7.5 表单示例三：人人网登录界面设计 183

第8章 其他CSS样式设计（教学视频：81分钟）

8.1 圆角的设计 187

8.1.1 通过设置背景设计圆角 187

8.1.2 五环效果 189

8.2 特殊部件设计 191

8.2.1 可移动的div 192

8.2.2 进度条设计 195

8.3 颜色 198

8.3.1 颜色的表示 198

8.3.2 颜色的使用 200

8.4 细说选择符 201

8.4.1 全局选择符 201

8.4.2 标签选择符 202

8.4.3 ID选择符 203

8.4.4 CLASS选择符 205

8.4.5 派生选择符 206

8.4.6 元素群选择符 208

8.4.7 指定选择符 209

8.4.8 属性选择符 211

8.4.9 相邻选择符 221

8.4.10 伪类选择符 222

8.5 样式优先级 224

8.5.1 各自的优先级 224

8.5.2 !important标识符 224

第9章 DIV布局控制（教学视频：33分钟）

9.1 块元素和行元素 226

9.1.1 区别和联系 226

9.1.2 分类 228

9.2 盒式模型 230

9.2.1 几个关键属性 230

9.2.2 间距 231

9.3 DIV定位举例一：个人网站类 233

9.3.1 个人网站举例 233

9.3.2 设计个人网站主页的布局 234

9.4 DIV定位举例二：新闻网站类 238

9.4.1 新闻网站举例 238

9.4.2 设计个人网站主页的布局 239

第10章 CSS Sprite技术（教学视频：56分钟）

10.1 什么是CSS Sprite技术 243

10.2 CSS Sprite的简单应用 244

10.3 设计热门查询栏 245

10.3.1 使用Photoshop定位元素 246

10.3.2 进行DIV排版 246

10.3.3 添加皮肤 248

10.3.4 添加鼠标事件处理 249

10.4 酷狗电台列表设计 250

10.4.1 图标元素设计 250

10.4.2 进行DIV排版 250

10.4.3 添加皮肤 254

10.4.4 鼠标移动事件响应 256

10.4.5 音乐提示响应模拟 257

10.5 菜单标签的Sprite应用 259

10.5.1 简单的DIV布局 259

10.5.2 使用CSS添加Sprite 260

10.5.3 使用JavaScript控制 261

第11章 CSS滤镜的使用（教学视频：48分钟）

11.1 静态滤镜 262

11.1.1 透明滤镜 262

11.1.2 模糊滤镜 264

11.1.3 基色滤镜 265

11.1.4 落影滤镜 266

11.1.5 光晕滤镜 268

11.1.6 光照滤镜 269

11.1.7 翻转滤镜 271

11.1.8 X光滤镜 273

11.1.9 运动模糊滤镜 274

11.1.10 阴影滤镜 276

11.1.11 波浪滤镜 277

11.1.12 图片插入滤镜 279

11.1.13 渐变滤镜 281

11.1.14 浮雕滤镜 282

11.2 动态滤镜 284

11.2.1 门滤镜 284

11.2.2 栅栏滤镜 285

11.2.3 棋盘滤镜 287

11.2.4 渐刷滤镜 289

11.2.5 消逝滤镜 291

11.2.6 虹滤镜 292

11.2.7 内插滤镜 295

11.2.8 像素化滤镜 296

11.2.9 随机线条滤镜 298

11.2.10 旋转刷滤镜 299

11.2.11 随机转换滤镜 301

11.2.12 随机溶解滤镜 304

11.2.13 螺旋滤镜 305

11.2.14 滑动滤镜 307

11.2.15 剥除滤镜 309

11.2.16 拉伸滤镜 311

11.2.17 齿轮滤镜 313

11.2.18 之字形滤镜 314

第12章 CSS浏览器样式兼容（教学视频：32分钟）

12.1 CSS兼容问题 317

12.1.1 什么是CSS兼容问题 317

12.1.2 兼容问题的解决方案 318

12.2 浏览器过滤语句 318

12.2.1 导入语句过滤器 318

12.2.2 IE判断过滤器 320

12.2.3 属性名字过滤器 323

12.2.4 根符号过滤器 324

12.2.5 派生选择符过滤器 325

12.2.6 属性选择符过滤器 327

12.2.7 注释语句过滤器 328

12.2.8 大括号过滤器 330

12.2.9 优先级过滤器 332

12.2.10 相邻选择符过滤器 333

12.2.11 转义字符过滤器 334

第2篇 DIV+CSS 布局实战演练

第13章 广告的设计（教学视频：34分钟）

13.1 旁侧浮动广告设计 338

13.1.1 旁侧浮动广告DIV设计 338

13.1.2 旁侧浮动广告CSS设计部分 339

13.1.3 旁侧浮动广告JavaScript控制部分 341

13.2 可折叠浮动广告设计 342

13.2.1 可折叠浮动广告DIV设计 342

13.2.2 可折叠浮动广告CSS设计 343

13.2.3 可折叠浮动广告JavaScript设计 344

13.3 底部提示广告设计 346

13.3.1 底部广告DIV设计 346

13.3.2 底部广告CSS设计 347

13.3.3 底部广告JavaScript设计 348

13.4 CSS窗口定位 350

第14章 公告列表设计（教学视频：35分钟）

14.1 视频排行列表设计 353

14.2 旁侧橱窗设计 358

14.3 天气预报设计 363

第15章 搜索条设计（教学视频：16分钟）

15.1 仿百度搜索栏设计 377

15.2 立体搜索栏设计 382

第16章 单击控件设计（教学视频：13分钟）

16.1 页面底部控件 387

16.2 页面顶部控件 390

第3篇 Web 开发进阶

第17章 JavaScript功能层控制（教学视频：53分钟）

17.1 JavaScript的引入 396

17.2 数据类型 399

17.3 程序控制 404

17.4 事件处理 412

17.5 DOM对象 414

第18章 DOM与XML应用（教学视频：31分钟）

18.1 HTML的DOM使用 418

18.2 重载标签节点的方法成员 435

18.3 XML的使用 442

第19章 静态和动态网站建站的方法（教学视频：15分钟）

19.1 申请个人子域名 458

19.2 建设网站 462

19.3 申请动态网站空间 465

19.4 上传PHP代码 467

第20章 搭建本地服务器（教学视频：11分钟）

20.1 搭建网站服务器 471

20.2 搭建数据库 476

第21章 快速构建本地网站（教学视频：9分钟）

21.1 本地服务器一键安装

21.2 使用Discuz代码 489

后记 500

本书在编写过程中涉及HTML、CSS、JavaScript、XML和XSL等相关知识，但一直围绕CSS技术这条中心线展开。本书讲解由浅入深，循序渐进，从基本的属性操作到高级的模型技术，再到案例剖析。为了让理论知识和实践更好地结合，书中给每个知识点都配有实例，并对每个实例进行剖析，便于读者领会，达到举一反三的效果。另外，为了让读者更加直观、高效地学习，作者专门录制了大量多媒体教学视频。这些视频与本书涉及的源程序均收录于配书光盘中。本书共21章，分为3篇。第1篇DIV+CSS布局速成，介绍Web标准语言、CSS入门与速成、CSS文字样式设计与速成、CSS图像样式设计与速成、CSS表格样式设计与速成、CSS列表样式设计与速成、CSS表单样式设计与速成、其他CSS样式设计、CSS Sprite技术、CSS滤镜的使用和CSS浏览器样式兼容；第2篇DIV+CSS布局实战演练，介绍广告设计、公告列表设计、搜索条设计和单击控件设计；第3篇Web开发进阶，介绍JavaScript功能层控制、DOM与XML应用、静态和动态网站建站的方法、搭建本地服务器和快速构建本地网站。本书不但适合没有DIV+CSS开发基础的学生、学员以及广大爱好者阅读，还适合使用DIV+CSS进行开发的各类工程技术人员阅读。学习本书，相信读者会对DIV+CSS有更深刻的理解。

全方位展现网站开发中的网页样式与布局技术，大量的开发经验贯穿始终
·以CSS技术为中心线展开，涵盖HTML、CSS、JavaScript、XML和XSL等知识
·讲解由浅入深，从基本的属性操作，到高级的模型技术，再到实战案例剖析，层层推进，步步深入
·实战为王，重点介绍了221个实例、26个小案例和3个综合案例，并给出了大量的实战经验和技巧，还提供了13.3小时配套多媒体教学视频辅助学习
·每个实例均按照“效果图切割→HTML代码编写→页面效果分析→最终的CSS页面布局的实现”进行讲解，很容易上手