CSS设计彻底研究PDF|Epub|txt|kindle电子书版本网盘下载

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

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

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

1.1 HTML与XHTML2

1.1.1　追根溯源2

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

1.1.3 XHTML与HTML的重要区别4

1.2 （X）HTML与CSS6

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-style52

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与DOM59

3.5.2　标准文档流62

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

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

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

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

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

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个浮动的div77

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

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

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.com331

13.1.3　Times.com331

13.1.4　CNN.com332

13.1.5　163.com333

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　设置linkList420

16.1.4　设置各个部分的标题420

16.1.5　设置footer422

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