CSS设计彻底研究PDF电子书下载

第1章 （X）HTML与CSS核心基础 1

1.1 HTML与XHTML 2

1.1.1　追根溯源 2

1.1.2　DOCTYPE（文档类型）的含义与选择 3

1.1.3 XHTML与HTML的重要区别 4

1.2 （X）HTML与CSS 6

1.2.1　CSS标准简介 6

1.2.2　在HTML中引入CSS的方法 7

1.3　基本CSS选择器 10

1.3.1　标记选择器 11

1.3.2　类别选择器 12

1.3.3　ID选择器 15

1.4　复合选择器 16

1.4.1 “交集”选择器 16

1.4.2　“并集”选择器 18

1.4.3　后代选择器 20

1.5　CSS的继承特性 22

1.5.1　继承关系 22

1.5.2　CSS继承的运用 24

1.6　CSS的层叠特性 26

1.7　本章小结 28

第2章 “CSS禅意花园”作品鉴赏 29

2.1 “CSS禅意花园”简介 30

2.2　郊野——两列布局 33

2.3　像素画——三列布局 34

2.4　百合池塘——三列布局变体 35

2.5　郁金香——多列布局 36

2.6　日与夜——包含圆角的设计 36

2.7　Si6——包含倾斜的设计 38

2.8　清茶时光——装饰性设计 39

2.9　爱之空气——流体布局 40

2.10　谷香——食品主题设计 41

2.11　城市——建筑主题设计 41

2.12 “卡通版”禅意花园——特色效果 42

2.13　收音机——特色效果 43

2.14　杀手风格——特色效果 44

2.15　海底世界——特色效果 45

2.16　博物馆——特色设计 47

2.17　剧院效果——特色效果 48

2.18　本章小结 48

第3章　深入理解盒子模型 49

3.1　盒子的内部结构 50

3.2　边框（border） 51

3.2.1　实验1——border-style 52

3.2.2　属性值的简写形式 53

3.2.3　实验2——属性的缩写形式 54

3.2.4　实验3——边框与背景 55

3.3　内边距（padding） 56

3.4　外边距（margin） 57

3.5　盒子之间的关系 59

3.5.1　HTML与DOM 59

3.5.2　标准文档流 62

3.5.3　＜div＞标记与＜span＞标记 63

3.6　盒子在标准流中的定位原则 65

3.6.1　实验1——行内元素之间的水平margin 66

3.6.2　实验2——块级元素之间的竖直margin 67

3.6.3　实验3——嵌套盒子之间的margin 68

3.6.4　实验4——将margin设置为负值 70

3.7　CSS中的几何题 71

3.8　本章小结 74

第4章　盒子的浮动与定位 75

4.1　盒子的浮动 76

4.1.1　准备代码 76

4.1.2　实验1——设置第1个浮动的div 77

4.1.3　实验2——设置第2个浮动的div 78

4.1.4　实验3——设置第3个浮动的div 79

4.1.5　实验4——改变浮动的方向 79

4.1.6　实验5——再次改变浮动的方向 80

4.1.7　实验6——全部向左浮动 81

4.1.8　实验7——使用clear属性清除浮动的影响 82

4.1.9　实验8——扩展盒子的高度 83

4.2　盒子的定位 84

4.2.1 static（静态定位） 85

4.2.2 relative（相对定位） 86

4.2.3 absolute（绝对定位） 90

4.2.4 fixed（固定定位） 97

4.3　z-index空间位置 97

4.4　盒子的display属性 97

4.5　本章小结 99

第5章　文字与图像 101

5.1　CSS文字样式 102

5.1.1　准备网页 102

5.1.2　设置字体 103

5.1.3　文字大小 104

5.1.4　行高 106

5.1.5　文字颜色与背景颜色 108

5.1.6　文字加粗、倾斜与大小写 109

5.1.7　文字的装饰效果 110

5.1.8　文字的水平对齐方式与段首缩进设置 111

5.1.9　文字布局 111

5.1.10　段落的垂直对齐方式 112

5.2　CSS图像样式 115

5.2.1　基本设置 115

5.2.2　背景图像 116

5.2.3　标题的图像替换 120

5.2.4　为图像增加投影效果 125

5.3　本章小结 133

第6章　链接与导航 135

6.1　丰富的超链接特效 136

6.1.1　动态超链接 136

6.1.2　按钮式超链接 137

6.1.3　CSS控制鼠标指针 139

6.1.4　浮雕背景超链接 140

6.1.5　让下划线动起来 143

6.2　项目列表 144

6.2.1　列表的符号 144

6.2.2　图片符号 146

6.3　简单的导航菜单 148

6.3.1　简单的竖直排列菜单 148

6.3.2　横竖自由转换菜单 151

6.4　本章小结 152

第7章 竖直排列的导航菜单 153

7.1　双竖线菜单 154

7.1.1　HTML框架 154

7.1.2　设置容器的CSS样式 155

7.1.3　设置菜单项的CSS样式 156

7.1.4　解决出现的问题 157

7.2　双斜角横线菜单 160

7.2.1　基本设置 161

7.2.2　菜单项设置 162

7.3　立体菜单 163

7.3.1　基本设置 164

7.3.2　菜单项设置 164

7.4　箭头菜单 166

7.4.1　基本思路 166

7.4.2　基本设置 168

7.4.3　设置箭头效果 169

7.5　带说明信息的菜单 172

7.5.1　基本思路 172

7.5.2　设置方法 173

7.6　本章小结 175

第8章　水平导航菜单 177

8.1　自适应的水平菜单 178

8.2　自适应的斜角水平菜单 180

8.2.1　基本思路 180

8.2.2　基本设置 181

8.2.3　设置斜角效果 182

8.2.4　设置鼠标经过效果 184

8.3　应用滑动门技术的玻璃效果菜单 185

8.3.1　基本思路 185

8.3.2　设置菜单整体效果 186

8.3.3　使用“滑动门”技术设置玻璃材质背景 187

8.3.4　进一步解决的问题 189

8.4　三状态玻璃效果菜单（双层滑动门应用） 192

8.4.1　设置菜单整体效果 192

8.4.2　设置第一层滑动门 193

8.4.3　设置第二层滑动门 195

8.4.4　设置表示当前页面的菜单项 195

8.4.5　进一步解决的问题 196

8.5　不使用图像的圆角菜单 197

8.5.1　实现圆角效果 197

8.5.2　用列表进行改造 200

8.5.3　设置鼠标响应效果 202

8.6　会跳起的多彩菜单 203

8.6.1　实现跳起效果 203

8.6.2　实现多彩效果 205

8.6.3　本案例的完整代码 206

8.6.4　实现向下弹出效果 210

8.7　本章小结 211

第9章　下拉菜单 213

9.1　HTML中的dl、dt和dd标记 214

9.2　菜单的HTML结构 215

9.3　对整体进行设置 216

9.4　对dl进行设置 217

9.5　对主菜单项（dt）进行设置 218

9.6　对子菜单项（dd）进行设置 219

9.7　对鼠标响应进行设置 220

9.8　实现主菜单项的不同颜色 222

9.9　IE 6兼容 223

9.10　本章小结 227

第10章　表格也精彩 229

10.1　控制表格 230

10.1.1　表格中的标记 230

10.1.2　表格的边框 232

10.1.3　表格宽度的确定 236

10.1.4　其他与表格相关的标记 236

10.2　美化表格 237

10.2.1　搭建HTML结构 238

10.2.2　整体设置 239

10.2.3　设置单元格样式 239

10.2.4　隔行变色 240

10.2.5　设置列样式 241

10.3　鼠标指针经过时整行变色提示的表格 243

10.3.1　搭建HTML结构 244

10.3.2　在Firefox和IE 7中实现鼠标指针经过时整行变色 245

10.3.3　在IE 6中实现鼠标指针经过时整行变色 246

10.4　Excel方式二维变色提示的表格 247

10.4.1　改造CSS代码 247

10.4.2　改造JavaScript代码 248

10.5　多视图模式日历案例概述 250

10.6　制作中视图模式 253

10.6.1　搭建HTML结构 253

10.6.2　设置整体样式和表头样式 254

10.6.3　设置日历单元格样式 255

10.6.4　总结经验 258

10.7　制作小视图模式 259

10.7.1　整体设置 259

10.7.2 为IE 7和Firefox制作鼠标指针经过时弹出的信息框 260

10.7.3　为IE 6制作鼠标指针经过时弹出的信息框 263

10.8　制作大视图模式 265

10.8.1　通过display属性改变盒子的类型 265

10.8.2　设置日程安排项目 267

10.9　本章小结 269

第11章　圆角设计 271

11.1　圆角框的作用 272

11.2　固定宽度圆角框 273

11.2.1　两背景图像法 273

11.2.2　使用透明背景图 276

11.2.3　带边框的固定宽度圆角框 277

11.2.4　单背景图像的带边框固定宽度圆角框 279

11.3　不固定宽度的圆角框 281

11.3.1　不固定宽度圆角框的含义 281

11.3.2　“4图像”单色不固定宽度圆角框 282

11.3.3　“4图像滑动门”单色不固定宽度圆角框 285

11.4 “5图像”二维滑动门经典圆角框 288

11.4.1　准备图像 289

11.4.2　搭建HTML结构 290

11.4.3　放置背景图像 291

11.4.4　设置样式并修复缺口 292

11.4.5　在整体页面中使用圆角框 294

11.4.6　实现网页换肤 296

11.5　本章小结 299

第12章 应用Spry制作高级网页组件 301

12.1　Tab菜单与Tab面板简介 302

12.2　Tab菜单 303

12.2.1　搭建HTML结构 303

12.2.2　设置整体的样式 304

12.2.3　设置Tab的样式 304

12.2.4　设置当前页的Tab样式 306

12.3　借助于Spry实现Tab面板 307

12.3.1　建立基本的Tab面板 308

12.3.2　准备背景图片 310

12.3.3　设置整体的CSS样式 310

12.3.4　设置单个Tab的CSS样式 311

12.3.5　设置单个Tab的滑动门背景 312

12.3.6　设置鼠标经过效果 313

12.3.7　设置当前页效果 314

12.3.8　设置Tab页内容的CSS样式 315

12.3.9　鼠标经过时换页 316

12.4　折叠面板 317

12.4.1　建立基本的折叠面板 317

12.4.2　准备背景图片 318

12.4.3　整体设置 318

12.4.4　设置折叠面板的标题 319

12.4.5　设置折叠面板的初始状态 320

12.4.6　设置展开状态的标题背景 321

12.4.7　设置鼠标经过时的标题背景 322

12.5　伸缩面板 323

12.5.1　建立基本的伸缩面板 323

12.5.2　设置标题的样式 324

12.5.3　对最上面的标题进行特殊处理 325

12.6　本章小结 327

第13章 固定宽度布局剖析与制作 329

13.1　CSS排版观念 330

13.1.1 MSN的首页 330

13.1.2　Yahoo.com 331

13.1.3　Times.com 331

13.1.4　CNN.com 332

13.1.5　163.com 333

13.2　单列布局 334

13.2.1　放置第一个圆角框 335

13.2.2　设置圆角框的CSS样式 335

13.2.3　放置其他圆角框 338

13.3 “1-2-1”固定宽度布局 340

13.3.1　准备工作 340

13.3.2　绝对定位法 342

13.3.3　浮动法 343

13.4　“1-3-1”固定宽度布局 346

13.5　“1-（（1-2）+1）-1”固定宽度布局 348

13.6　魔术布局 350

13.6.1　制作步骤 351

13.6.2　修正缺陷 353

13.7　本章小结 356

第14章 变宽度网页布局剖析与制作 359

14.1 “1-2-1”变宽度网页布局 360

14.1.1 “1-2-1”等比例变宽布局 360

14.1.2 “1-2-1”单列变宽布局 362

14.2 “1-3-1”宽度适应布局 367

14.2.1 “1-3-1”三列宽度等比例布局 367

14.2.2 “1-3-1”单侧列宽度固定的变宽布局 367

14.2.3 “1-3-1”中间列宽度固定的变宽布局 370

14.2.4　进一步的思考 373

14.2.5 “1-3-1”双侧列宽度固定的变宽布局 373

14.2.6 “1-3-1”中列和侧列宽度固定的变宽布局 376

14.3　变宽布局方法总结 378

14.4　分列布局背景色问题 379

14.4.1　固定宽度布局的列背景色设置 380

14.4.2　特殊宽度变化布局的列背景色设置 384

14.4.3　单列宽度变化布局的列背景色设置 384

14.4.4　多列等比例宽度变化布局的列背景色设置 385

14.5　CSS排版与传统的表格方式排版的分析 388

14.6　本章小结 390

第15章 “CSS禅意花园”作品研究 393

15.1 “禅意花园”页面HTML结构分析 394

15.2　亲自动手 397

15.2.1　结构分析 397

15.2.2　整体设置 398

15.2.3　设置页头 399

15.2.4　设置supportingText部分和linkList部分 401

15.3　禅意花园作品的赏析与借鉴方法指导 403

15.3.1 191号作品分析 404

15.3.2 026号作品 411

15.3.3 175号作品 413

15.4　本章小结 414

第16章 综合案例研究 415

16.1 《简约夕阳》（158号作品）布局方法剖析 416

16.1.1　设置渐变的页面背景 417

16.1.2　设置整体结构 419

16.1.3　设置linkList 420

16.1.4　设置各个部分的标题 420

16.1.5　设置footer 422

16.1.6　本案例的总结 423

16.2 《日记》（191号作品）布局方法剖析 423

16.2.1　准备图片 424

16.2.2　设置页头 426

16.2.3　设置supportingText部分 430

16.2.4　设置linkList部分 432

16.2.5　本案例总结 434

16.3　本章小结 434

第17章　从学习到创作 435

17.1　拍摄素材照片 436

17.2　在图像软件中设计方案 438

17.3　整体的结构分析 440

17.4　CSS样式设计与编码 442

17.5　修改新页面方案 448

17.6　本章小结 449

附录 CSS英文小字典 451