精通 CSS 网页布局PDF电子书下载

第1章 CSS布局基础 1

1.1认识网页中的CSS 1

1.1.1编写符合CSS布局的HTML结构 1

1.1.2 DOCTYPE（文档类型）与CSS的关系 3

1.2 CSS基本语法和用法 4

1.2.1 CSS基本语法 4

1.2.2应用CSS样式 5

1.2.3建立外部样式表 6

1.2.4在HTML中导入外部样式表 7

1.3 CSS的属性和属性值 8

1.3.1如何记忆CSS的属性 8

1.3.2 CSS的取值单位 9

1.4 CSS常用选择符 10

1.4.1标签选择符 10

1.4.2类选择符 11

1.4.3 ID选择符 13

1.5 CSS高级选择符 15

1.5.1认识HTML文档的树状结构 15

1.5.2子选择符 17

1.5.3相邻选择符 18

1.5.4属性选择符 19

1.6灵活使用CSS选择符 23

1.6.1 CSS选择符分组 23

1.6.2通配选择符 24

1.6.3包含选择符 24

1.6.4伪类和伪元素选择符 26

1.6.5 CSS选择符的嵌套 27

1.7 CSS的继承性 28

1.7.1认识CSS的继承性 28

1.7.2 CSS继承性的局限性 29

1.8 CSS样式层叠和选择符优先级 31

1.8.1 CSS样式表的优先级 31

1.8.2 CSS样式的优先级 31

1.8.3 CSS选择符的优先级 31

第2章 使用Dreamweaver实现CSS布局 33

2.1认识Dreamweaver的CSS布局工作流 33

2.1.1增强CSS功能的【属性】面板 33

2.1.2【页面属性】对话框 35

2.1.3【CSS样式】面板 36

2.1.4属性表 37

2.2操作【CSS样式】面板 38

2.2.1新建样式 38

2.2.2定义样式的属性 39

2.2.3应用样式 43

2.3以CSS技术为核心的设计视图 45

2.3.1强大的CSS设备类型 45

2.3.2可视化助理 47

2.4使用DW实现CSS布局实战 49

2.4.1使用Dreamweaver CS3构建页面结构 49

2.4.2使用【页面属性】统一基本样式 51

2.4.3使用【CSS样式】面板定制页面基本布局 54

第3章 听话的文字和版式 56

3.1看懂Dreamweaver CS3提供的模板 56

3.1.1善于利用示例页 56

3.1.2挖掘标准网页布局模板的价值 60

3.2你的文字听话吗 62

3.2.1国际雅虎和中国雅虎 62

3.2.2选择好单位让你的文字更听话 64

3.2.3设计网页字体大小配置方案 65

3.2.4设计与字体大小相关联的网页布局 68

3.3留心，不要让你的文字“露怯” 70

3.3.1不要以为多此一举 71

3.3.2让网页字体显示更灵活 71

3.3.3别忘了通用字体 72

3.4小家伙，你向哪儿看齐 73

3.4.1文本对齐 74

3.4.2布局居中 74

3.4.3布局元素向左、右对齐 75

3.4.4文本和元素垂直对齐 76

3.4.5绝对定位元素居中显示 78

3.4.6混合结构中对齐处理 80

3.5咱们比比个吧 81

3.5.1什么样的行高更合适阅读 82

3.5.2行高、边距和伪行高 83

3.6让网页看起来和颜悦色 85

3.6.1在CSS中使用颜色 85

3.6.2 CSS布局与配色 86

第4章 扮靓网页的天使——图像 89

4.1选择：前景图像和背景图像 89

4.1.1前景图像 89

4.1.2背景图像 90

4.1.3如何选用前景图像和背景图像 91

4.1.4走出迷失的图像URL 91

4.2图像边框和阴影 93

4.2.1定义边距 93

4.2.2巧设边距 94

4.2.3为图像增加阴影 96

4.2.4为img元素定义默认阴影样式 98

4.2.5设计晶莹剔透的水印 99

4.3图文混合排版 101

4.3.1单行图文定位 101

4.3.2单行图文对齐 103

4.3.3图文环绕 106

4.3.4调整图文环绕的间距 108

4.3.5不规则图文环绕 108

4.4隐形的翅膀——背景图像 111

4.4.1控制背景图像的重复显示 111

4.4.2背景图像水平平铺应用示例 112

4.4.3背景图像垂直平铺应用示例 113

4.4.4精确定位背景图像 114

4.4.5固定背景图像在浏览器中的位置 117

4.4.6如何增加多个背景图像 118

4.4.7设计更酷的圆角 120

4.5背景图像布局应用——伪列布局 124

第5章 活泼的超链接和导航菜单 132

5.1轻松掌握超链接样式 132

5.1.1怪异的伪类 132

5.1.2超链接的四种状态 133

5.1.3为超链接绑定不同的样式 134

5.1.4为页面定义不同的超链接样式 135

5.2花枝招展的超链接样式 137

5.2.1为超链接定义普通样式 137

5.2.2避免影响版面晃动的超链接样式 138

5.2.3模拟按钮样式 139

5.2.4使用图像设计超链接样式 141

5.2.5设计具有扩展性的超链接样式 143

5.3构建导航条列表框架及其基本样式 144

5.3.1为什么使用项目列表来构建导航条 145

5.3.2搭架结构合理的导航列表 145

5.3.3使用定义列表搭架导航列表 147

5.3.4控制项目列表的样式 147

5.3.5有趣的项目符号 148

5.3.6自定义图片项目符号 149

5.3.7通过背景图像来定义项目符号 150

5.3.8使用行内显示法设计项目列表水平显示 151

5.3.9使用浮动法设计项目列表水平显示 153

5.3.10设计水平浮动列表的超链接样式 153

5.3.11解决浮动溢出问题 154

5.3.12使用定位法设计项目列表水平显示 155

5.4设计导航菜单 155

5.4.1淡雅的垂直导航菜单 156

5.4.2巧妙的水平导航菜单 158

5.4.3背景图像在导航菜单中的应用 161

5.4.4实用的多级菜单 164

5.4.5时尚的滑动门菜单 167

第6章 更专业的表格和表单 170

6.1用好表格 170

6.1.1正确使用表格 170

6.1.2优化数据表格的结构 174

6.1.3设计表格样式 176

6.2表格样式设计实战 178

6.2.1设计表格行样式 179

6.2.2设计表格列样式 180

6.2.3设计鼠标经过时表格行的样式 180

6.3用好表单 182

6.3.1认识表单 182

6.3.2设计表单样式 184

6.4表单样式设计实战 186

6.4.1设计高亮显示当前表单样式 187

6.4.2设计图标样式的表单效果 188

6.4.3设计易用性表单效果 190

第7章 浮动的网页布局 194

7.1 CSS的“水立方”模型 194

7.1.1盒模型 194

7.1.2盒模型解疑 195

7.1.3盒模型的外边距 196

7.1.4行内元素的外边距 197

7.1.5块状元素的外边距 198

7.1.6浮动元素的外边距 198

7.1.7绝对定位元素的外边距 199

7.1.8盒模型的内边距 200

7.1.9盒模型的边框 202

7.1.10盒模型的宽和高 203

7.2构建符合标准的网页结构 205

7.2.1是内容决定结构，还是表现决定结构 205

7.2.2选择好结构标签 207

7.2.3研究禅意花园的网页结构 207

7.3 CSS浮动布局基础 211

7.3.1认识网页布局类型 211

7.3.2准备有趣的模块浮动游戏 211

7.3.3①②③顺序的水平布局 212

7.3.4③②①顺序的水平布局 212

7.3.5②①③顺序的水平布局 213

7.3.6③①②顺序的水平布局 214

7.3.7①-②③结构布局 216

7.4 CSS浮动布局高级技术 217

7.4.1探究浮动元素的空间大小 217

7.4.2探究浮动元素的移动位置 218

7.4.3探究浮动元素的环绕关系 220

7.4.4浮动与清除 222

7.4.5浮动元素包含其他对象的问题及其解决方法 224

7.4.6浮动元素被其他对象包含的问题及其解决方法 225

7.4.7浮动布局中元素垂直间距问题以及解决方法 227

7.4.8浮动布局中元素水平间距问题以及解决方法 228

7.4.9浮动布局中浮动元素并列错位问题以及解决方法 230

7.5 CSS浮动布局实战 232

7.5.1深红色咖啡馆 232

7.5.2阳光灿烂喜洋洋 237

第8章 精确的网页布局 243

8.1 CSS精确布局的定位原理 243

8.1.1认识position 243

8.1.2静态定位 244

8.1.3绝对定位 245

8.1.4相对定位 245

8.1.5固定定位 248

8.2定位布局中参照物和坐标系 250

8.2.1绝对定位的参照物 250

8.2.2绝对定位的坐标系 253

8.2.3绝对定位的相对论 255

8.2.4相对定位参照物和坐标系 256

8.3定位布局中元素层叠处理 257

8.3.1定位元素的层叠顺序 258

8.3.2定位元素与文档流的层叠关系 259

8.3.3定位元素的层叠包含关系 260

8.4 CSS定位布局实战 262

8.4.1米老鼠卡通画册 262

8.4.2禅意花园展室 267

8.4.3蓝色的多瑙河 272

第9章 兼容性网页布局 278

9.1智能的IE条件语句 278

9.1.1认识IE条件语句 278

9.1.2 IE条件语句基本用法 279

9.1.3 IE条件语句在实践中应用 282

9.2探析IE浏览器渲染网页布局的特性 286

9.2.1认识IE浏览器的渲染特性——Layout 286

9.2.2操控IE元素的Layout特性 287

9.2.3网页元素的Layout特性 287

9.2.4行内元素的Layout特性 290

9.2.5与Layout特性相关的IE解析Bug和解决方法 290

9.2.6能够更好兼容不同浏览器 293

9.2.7 Layout元素与包含浮动元素的关系 293

9.2.8 Layout元素与相邻浮动元素的关系 295

9.2.9 Layout元素与列表元素的关系 296

9.2.10 Layout元素与定位元素的关系 299

9.3浏览器兼容技术解析 300

9.3.1你的浏览器符合标准吗 300

9.3.2兼容IE 6版本浏览器 302

9.3.3兼容IE 5系列版本浏览器 303

9.3.4兼容IE 7版本浏览器 305

9.3.5兼容FF等标准浏览器 305

9.4深入剖析CSS层叠布局 306

9.4.1认识CSS层叠包含框 306

9.4.2 CSS层叠包含框嵌套关系 308

9.4.3 IE在解析CSS层叠关系时的Bug 309

9.4.4探析CSS层叠负值以及IE存在Bug 310

9.5 IE浏览器常见Bug及其解决方法 312

9.5.1超链接设计中存在的Bug 312

9.5.2 IE元素的内容与背景分离显示的Bug 313

9.5.3 IE 6躲躲猫Bug 314

9.5.4 IE 6多余字符Bug 315

9.6兼容性网页布局实战 316

9.6.1三列等高布局新法及其非IE存在的Bug和解决方法 316

9.6.2三列浮动布局中IE的垂直空隙Bug及其兼容方法 320

第10章 网页结构化布局与实施 323

10.1设计网页基本结构 323

10.1.1网页基本结构的设计思路 323

10.1.2设计符合SEO的网页结构 326

10.2单列版式布局 327

10.2.1单列版式的布局结构和设计方法 328

10.2.2单列固定宽度版式设计 330

10.2.3单列固定宽度版式实施 332

10.2.4江南水乡意象画布局设计 334

10.2.5江南水乡意象画布局实战 337

10.3单列液态框架版式布局 340

10.3.1使用CSS设计框架结构 340

10.3.2使用CSS设计单列液态布局 343

10.4两列版式布局 346

10.4.1两列版式的布局结构和设计方法 347

10.4.2两栏浮动版式中兼容固定和自适应宽度的设计方法和探索 349

10.4.3两栏浮动版式中自适应宽度的设计方法和探索 351

10.4.4两栏浮动版式中兼容性宽度的设计方法和探索 353

10.4.5两栏固定版式的设计方法和探索 354

10.4.6黑色理想网页布局实施实战 355

10.5三列版式布局 361

10.5.1三列版式的布局结构和设计方法 361

10.5.2解析 Dreamweaver CS3提供的绝对定位布局及存在问题 362

10.5.3三列液态版式的设计新方法和探索 364

10.5.4三列固定版式设计方法和探索 366

10.5.5一列液态两列固定版式设计方法和探索 367

10.5.6二列液态一列固定版式设计方法和探索 369

10.5.7山鹰之美网页布局实战 370

第11章 CSS框架设计及其案例解析 376

11.1 CSS框架设计 376

11.1.1什么是CSS框架 376

11.1.2分析CSS框架的优缺点 377

11.1.3如何设计CSS框架 378

11.2 CSS框架的抽象性及其设计 378

11.2.1认识CSS的类样式 379

11.2.2 CSS类样式的实施策略 379

11.2.3通用CSS类样式设计 380

11.2.4 CSS框架中元素默认样式设计 383

11.2.5 CSS框架中其他类型选择符样式的处理 386

11.3 CSS框架的可维护性及其设计 387

11.3.1 CSS框架的注释技巧及其可读性 387

11.3.2 CSS框架中类名和ID名的可读性 388

11.3.3 CSS框架代码的排版格式应简明直观 389

11.3.4框架内样式代码的结构顺序应符合一定的阅读习惯 391

11.4 CSS框架的可扩展性和兼容性及其设计 391

11.4.1 CSS的继承性及其利用 391

11.4.2 CSS框架的继承与包含关系及其应用 393

11.4.3通过样式表的分类、组织实现CSS框架的可扩展性 395

11.4.4 CSS框架的可兼容性 397

11.5 CSS框架案例解析 397

11.5.1解析Elements CSS框架 398

11.5.2解析Blueprint CSS框架 401

第12章 购物网站结构与布局实施 409

12.1设计购物网站的基本结构 409

12.1.1网站内需分析 409

12.1.2设计网站的基本结构 411

12.1.3完善语义化结构 413

12.2使用CSS完成基本结构的布局 415

12.2.1实施网页基本布局 415

12.2.2设计滑动门菜单 417

12.2.3设计圆角区域 419