新手学CSS+DIVPDF电子书下载

第1篇　CSS技术基础 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.3　初识CSS的作用 6

1.4　选择一个合适的开发工具 8

1.4.1　CSS专业开发编辑器TopStyle 8

1.4.2　网页开发编辑器Dreamweaver 10

1.5　常见面试题 10

1.6 小结 11

1.7　习题 11

第2章　CSS初体验——编写一个简单的网页文档 12

2.1　编写XHTML文档 12

2.1.1 使用Dreamweaver新建一个XHTML框架文档 12

2.1.2　手工编写XHTML文档 14

2.2　使CSS在XHTML文档中生效 15

2.2.1 在标签中加入CSS样式 15

2.2.2　在＜style＞＜／style＞标签中加入CSS样式 16

2.2.3　链入外部CSS样式表 17

2.2.4　导入样式 18

2.2.5　优先级问题 19

2.3　初探CSS语句的结构和工作原理 20

2.3.1　CSS语句的结构 20

2.3.2　CSS语句的工作原理 20

2.4　CSS的注释 21

2.5　实例——从无到有建网页 21

2.6　常见面试题 24

2.7　小结 25

2.8 习题 25

第3章　CSS的基本语法 26

3.1　选择器 26

3.1.1　标签选择器 26

3.1.2　类选择器 27

3.1.3　ID选择器 28

3.1.4　全局选择器 30

3.1.5　组合选择器 30

3.1.6　继承选择器 32

3.1.7　伪类 35

3.2　声明 35

3.2.1 多重声明 36

3.2.2　集体声明 36

3.3　CSS的层叠原理 38

3.3.1　CSS样式来源 38

3.3.2　选择器的优先级 38

3.3.3　!important语句 39

3.3.4　顺序优先级 40

3.3.5　CSS的层叠规则 41

3.4　实例——制作简单的竖形菜单 42

3.5　常见面试题 44

3.6　小结 44

3.7 习题 44

第4章　CSS的单位 46

4.1　颜色单位 46

4.1.1　颜色名称 46

4.1.2　百分比颜色 47

4.1.3　数字颜色 48

4.1.4　十六进制颜色 49

4.2　长度单位 51

4.2.1　绝对单位 51

4.2.2　相对单位 51

4.3　常见面试题 53

4.4　小结 53

4.5 习题 54

第2篇　使用CSS控制页面样式 56

第5章　用CSS控制文本样式 56

5.1 字体 56

5.2　文字大小概述 57

5.2.1　设置文字大小 58

5.2.2　定义文字的相对大小 58

5.2.3　定义文字的绝对大小 60

5.3　文字颜色 62

5.4　文字粗细 63

5.5　斜体 65

5.6 下划线、顶划线和删除线 66

5.7　英文字母大小写 68

5.8　属性的缩写法 69

5.9　用段落属性改变文字的段落样式 69

5.9.1　段落的水平对齐方式 70

5.9.2　段落的垂直对齐方式 71

5.9.3　首行缩进 73

5.9.4　行间距与字间距 74

5.10　实例——简单的文章页面 78

5.11　常见面试题 81

5.12　小结 81

5.13 习题 81

第6章　用CSS设置图片样式 82

6.1　用CSS设置图片的样式 82

6.1.1　在网页中插入图片 82

6.1.2　控制图片的大小 83

6.1.3　给图片添加边框的技巧 87

6.1.4　图片不显示的解决办法 88

6.1.5　给图片增加链接 89

6.2　实例——文字环绕 90

6.3　实例——制作简单相册 92

6.4　常见面试题 97

6.5　小结 98

6.6 习题 98

第7章　用CSS设置背景 99

7.1　设置背景颜色 99

7.2　设置背景图片 100

7.2.1　为元素添加背景图案 100

7.2.2　背景图的重复 101

7.2.3　背景图的位置 103

7.2.4　滚动和固定背景图 107

7.2.5　背景属性缩写 109

7.3 实例——制作圆角 109

7.4　常见面试题 113

7.5　小结 114

7.6　习题 114

第8章　用CSS控制超链接样式 115

8.1　改变超链接的基本样式 115

8.2　丰富超链接的表现形式 116

8.2.1　超链接背景图的巧妙运用 116

8.2.2　超链接翻转效果 119

8.3　实例——制作实用工具栏 122

8.4　常见面试题 126

8.5　小结 126

8.6 习题 127

第9章　用CSS控制列表样式 128

9.1　列表的类型 128

9.1.1　无序列表 128

9.1.2　有序列表 129

9.1.3　定义列表 130

9.2　改变列表符的样式 131

9.2.1　使用自带的列表符 131

9.2.2　用背景图片改变列表符 133

9.2.3　改变列表符的位置 134

9.2.4　列表属性的速写法 135

9.3　实例——制作带时间显示的新闻列表 135

9.4　实例——制作WEB 2.0风格导航 137

9.5　常见面试题 141

9.6　小结 141

9.7 习题 141

第10章　用CSS美化表格 143

10.1　表格的基本页面元素 143

10.2　使用CSS控制表格元素 146

10.2.1　设置表格元素宽度 146

10.2.2　设置表格元素边框 147

10.3　实例——制作日历 147

10.4　常见面试题 151

10.5　小结 151

10.6　习题 151

第11章　用CSS控制表单样式 153

11.1　了解表单元素 153

11.1.1　form标签和fieldset标签 153

11.1.2　表单域和表单按钮 155

11.2　使用CSS美化表单元素 155

11.2.1　美化fieldset标签 156

11.2.2　美化表单域 157

11.3　实例——制作整洁的用户登录框 160

11.4　实例——制作简单的留言板 165

11.5　常见面试题 170

11.6 小结 170

11.7 习题 170

第12章　CSS滤镜的应用 172

12.1　滤镜概述 172

12.2　透明层次滤镜（alpha） 172

12.3　颜色透明滤镜（chroma） 176

12.4　模糊滤镜（blur） 177

12.5　固定阴影滤镜（dropshadow） 179

12.6　移动阴影滤镜（shadow） 180

12.7　光晕滤镜（glow） 181

12.8　灰度滤镜（gray） 182

12.9　反色滤镜（invert） 183

12.10　镜像滤镜（flip） 184

12.11　遮罩滤镜（mask） 185

12.12　X射线滤镜（x-ray） 185

12.13　波纹滤镜（wave） 186

12.14　常见面试题 187

12.15　小结 188

12.16　习题 188

第13章　CSS代码的编写规范 189

13.1　使用语义明确的标记 189

13.2　使用有意义的CSS命名 189

13.3　CSS代码的缩写 191

13.4　合理的CSS注释 192

13.5　常见面试题 192

13.6　小结 193

13.7　习题 193

第3篇　DIV+CSS布局 196

第14章　DIV+CSS布局基础 196

14.1　初识DIV+CSS布局的流程 196

14.2　了解盒模型 198

14.2.1　div标签的盒模型举例 198

14.2.2　基本盒模型 201

14.2.3　边距 202

14.2.4　补白 206

14.2.5　边框 207

14.3　页面元素的布局 211

14.3.1　块级元素与行内元素 211

14.3.2　CSS布局方式——常规流 213

14.4　CSS布局方式——浮动 213

14.4.1　两个元素的浮动应用 214

14.4.2　多个元素的浮动应用 216

14.4.3　清除浮动 218

14.4.4　解决火狐浏览器的计算高度问题 219

14.5　CSS布局方式——相对定位 221

14.5.1　单个元素的相对定位 222

14.5.2　两个元素的相对定位 224

14.6　CSS布局方式——绝对定位 226

14.6.1　单个元素的绝对定位 226

14.6.2　两个元素的绝对定位 227

14.7　实例——制作歌曲专辑列表 229

14.8　实例——给图片加入信息 232

14.9　常见面试题 234

14.10　小结 234

14.11 习题 235

第15章　CSS页面基本排版技术 236

15.1　固定宽度布局 236

15.1.1　一列的水平居中布局 236

15.1.2　两列浮动布局 239

15.1.3　三列浮动布局 243

15.2　自适应宽度布局 248

15.2.1　两列布局——两列自适应宽度 248

15.2.2　两列布局——左列固定右列自适应 250

15.2.3　三列布局——中间列自适应 252

15.3　复杂的页面排版 254

15.3.1　复杂的页面排版——垂直布局 255

15.3.2　复杂的页面排版——水平布局 261

15.4　常见面试题 266

15.5　小结 266

15.6　习题 266

第16章　CSS的过滤器和HACK 268

16.1　CSS的过滤器和HACK概述 268

16.2　常用的HACK技术 269

16.2.1　全局选择器html 269

16.2.2　!important和下划线 270

16.2.3　区分IE6、IE7和火狐浏览器的HACK技术 270

16.3　修复浏览器中常见的bug 271

16.3.1　修正浮动元素的双倍边距 272

16.3.2　修正IE6的消隐 273

16.3.3　修正IE6的重复字符 275

16.3.4　让火狐浏览器自动计算容器高度 276

16.3.5　实现容器的最小高度 278

16.4　常见面试题 281

16.5 小结 281

16.6　习题 281

第17章　了解WEB标准和重构 283

17.1　网页的组成 283

17.1.1　结构 283

17.1.2　表现 285

17.1.3　行为 286

17.2　了解WEB标准 286

17.2.1　什么是WEB标准 286

17.2.2　什么是W3C 287

17.2.3　使用WEB标准的必要性 288

17.3　如何建立标准WEB网页 289

17.3.1　正确书写网页文档头部 289

17.3.2　遵循XHTML语法 289

17.4　常见面试题 291

17.5　小结 292

17.6　习题 292

第4篇　精彩案例剖析 294

第18章　DIV+CSS页面布局实例：制作个人网站首页 294

18.1　个人网站首页构架分析 294

18.2　分块制作个人网站首页 295

18.2.1 制作个人网站首页的总体布局 295

18.2.2　实现左中右浮动布局 297

18.2.3　制作个人网站首页的左边栏目（leftCol） 299

18.2.4　制作个人网站首页的中间栏目（midCol） 301

18.2.5　制作个人网站首页的右边栏目（rightCol） 304

18.3　小结 305

第19章　DIV+CSS页面布局实例：制作个人博客 306

19.1　个人博客网站构架分析 306

19.2　个人博客首页的总体布局 308

19.2.1　建立网站文件夹以及构建整体网页的结构 308

19.2.2　构建整体网页的布局 309

19.2.3　实现mian容器中栏目的左中右浮动布局 309

19.3　制作个人博客的首页头部（header） 310

19.4　制作个人博客的着页左边栏目（leftCol） 311

19.4.1 制作左边栏中网文的结构 312

19.4.2　制作左边栏中网文的样式 314

19.4.3　完成leftCol其余部分的布局 316

19.5　制作个人博客首页的中间栏目（midCol） 318

19.6 制作个人博客首页的右边栏目（rightCol） 321

19.7　制作个人博客分页 322

19.7.1　制作个人博客网站的文章页（article.html）分页 322

19.7.2　制作个人博客网站的留言板（guestbook.html）分页 327

19.7.3　制作个人博客网站的主题页（archives.html）分页 327

19.3.4　制作个人博客关于（about.html）分页 329

19.8　小结 331

第20章　DIV+CSS页面布局实例：制作服饰商城 332

20.1　服饰商城构架分析 332

20.2　制作服饰商城首页的总体布局 333

20.2.1　建立网站文件夹以及构建整体网页的结构 333

20.2.2　构建整体网页的布局 334

20.3　制作服饰商城首页头部（header） 335

20.4　制作服饰商城导航（nav） 336

20.5　制作服饰商城第一栏（firstCol） 338

20.5.1　制作服饰商城第一栏的布局 338

20.5.2　制作服饰商城第一栏的左边部分sortList 339

20.5.3 制作服饰商城第一栏的中间部分midFlash和右边部分rightBox 341

20.6　制作服饰商城第二栏（secondCol） 344

20.6.1　制作服饰商城第二栏的布局 344

20.6.2　制作服饰商城第二栏的左列secondColLeft 344

20.6.3　制作服饰商城第二栏的右列secondColRight 347

20.7　制作服饰商城购物指导部分（guide） 350

20.8　制作服饰商城的商品列表页（list.html）分页 352

20.8.1　制作list.html的总体布局 353

20.8.2　制作list.html的左列subLeftCol 353

20.8.3　制作list.html的左列subRightCol 357

20.9　制作服饰商城的商品详细页（detail.html）分页 359

20.9.1　制作detail.html的右边栏目 359

20.9.2　制作产品评论栏目 362

20.10　小结 365

第21章　DIV+CSS页面布局实例：制作门户网站 366

21.1 门户网站构架分析 366

21.2　制作门户网站首页的总体布局 367

21.2.1　建立网站文件夹以及构建整体网页的结构 367

21.2.2　构建整体网页的布局 367

21.3　制作门户网站首页头部（header） 368

21.4　制作门户网站首页的第一栏（firstCol） 370

21.4.1　制作firstCol的总体布局 370

21.4.2　制作firstCol的左边栏firstColLeft 371

21.4.3　制作firstCol的中间栏firstColMid 374

21.4.4　制作firstCol的右边栏firstColRight 378

21.5　制作门户网站首页的精选图片（picture） 381

21.6　制作门户网站首页的校园栏目和教育栏目（ceWrapper） 382

21.6.1 制作门户网站首页的校园栏目 382

21.6.2　制作门户网站首页的教育栏目 385

21.7　制作门户网站首页的四栏布局（fourCols） 388

21.8　制作门户网站首页的广告位（adImg）和两栏布局（twoCols） 392

21.9　制作门户网站首页的尾部（footer） 397

21.10　制作门户网站的资讯内容页（content.html） 398

21.10.1　制作contenthtml的总体布局 398

21.10.2　制作content.html的左列leftCol 399

21.10.3　制作content.html的右列rightCol 403

21.11　小结 406