精通CSS+DIV网页样式与布局

第1部分CSS基础知识篇

第1章CSS的初步体验3

1.1CSS的概念4

1.1.1标记的概念4

1.1.2传统HTML的缺点5

1.1.3CSS的引入7

1.1.4如何编辑CSS9

1.1.5浏览器与CSS10

1.2使用CSS控制页面11

1.2.1行内样式11

1.2.2内嵌式12

1.2.3链接式13

1.2.4导入样式14

1.2.5各种方式的优先级问题17

1.3体验CSS19

1.3.1从零开始19

1.3.2加入CSS控制21

1.3.3控制图片23

1.3.4CSS的注释26

第2章CSS的基本语法27

2.1CSS选择器28

2.1.1标记选择器28

2.1.2类别选择器29

2.1.3ID选择器34

2.2选择器声明36

2.2.1集体声明36

2.2.2选择器的嵌套38

2.3CSS的继承40

2.3.1父子关系40

2.3.2CSS继承的运用41

第3章用CSS设置丰富的文字效果45

3.1CSS文字样式46

3.1.1字体46

3.1.2文字大小48

3.1.3文字颜色51

3.1.4文字粗细53

3.1.5斜体54

3.1.6文字的下划线、顶划线和删除线55

3.1.7英文字母大小写57

3.2文字实例一：模拟Google公司Logo58

3.3文字实例二：制作页面的五彩标题62

3.4CSS段落文字67

3.4.1段落的水平对齐方式67

3.4.2段落的垂直对齐方式68

3.4.3行间距和字间距71

3.4.4首字放大73

3.5段落实例：百度搜索75

第4章用CSS设置图片效果81

4.1图片样式82

4.1.1图片边框82

4.1.2图片缩放86

4.2图片的对齐87

4.2.1横向对齐方式88

4.2.2纵向对齐方式88

4.3图文混排91

4.3.1文字环绕91

4.3.2设置图片与文字间距93

4.4图文实例：八仙过海93

第5章用CSS设置网页中的背景97

5.1背景颜色98

5.1.1页面背景色98

5.1.2用背景色给页面分块99

5.2背景图片101

5.2.1页面的背景图102

5.2.2背景图的重复103

5.2.3背景图片的位置107

5.2.4固定背景图片110

5.2.5添加多个背景图片112

5.2.6背景样式综合设置113

5.3背景综合一：我的个人主页113

5.4背景综合二：古词《念奴娇.赤壁怀古》118

第6章用CSS设置表格与表单的样式123

6.1控制表格124

6.1.1表格中的标记124

6.1.2表格的颜色127

6.1.3表格的边框127

6.2表格实例一：隔行变色130

6.3表格实例二：鼠标经过时变色的表格132

6.4表格实例三：日历134

6.5CSS与表单139

6.5.1表单中的元素139

6.5.2像文字一样的按钮142

6.5.3七彩的下拉菜单144

6.6综合实例一：直接输入的Excel表格146

6.7综合实例二：模仿新浪网民调查问卷149

第7章用CSS设置页面和浏览器的元素153

7.1丰富的超链接特效154

7.1.1动态超链接154

7.1.2按钮式超链接156

7.1.3浮雕式超链接158

7.2鼠标特效163

7.2.1CSS控制鼠标箭头164

7.2.2鼠标变幻的超链接165

7.3页面滚动条166

第8章用CSS制作实用的菜单169

8.1项目列表170

8.1.1列表的符号170

8.1.2图片符号173

8.2无需表格的菜单175

8.3菜单的横竖转换178

8.4菜单实例一：百度导航条181

8.5菜单实例二：流行的Tab菜单185

第9章CSS滤镜的应用191

9.1滤镜概述192

9.2通道(Alpha)192

9.3模糊(Blur)198

9.4运动模糊(MotionBlur)199

9.5透明色(Chroma)200

9.6下落的阴影(Dropshadow)201

9.7翻转变换(Flip)203

9.8光晕(Glow)205

9.9灰度(Gray)207

9.10反色(Invert)208

9.11遮罩(Mask)209

9.12阴影(Shadow)210

9.13X射线(X-ray)211

9.14浮雕纹理(Emboss和Engrave)212

9.15波浪(Wave)215

第2部分CSS+DIV美化和布局篇

第10章理解CSS定位与div布局221

10.1div标记与span标记222

10.1.1概述222

10.1.2div与span的区别223

10.2盒子模型224

10.2.1盒子模型的概念225

10.2.2border225

10.2.3padding229

10.2.4margin231

10.3元素的定位238

10.3.1float定位239

10.3.2position定位246

10.3.3z-index空间位置254

10.4定位实例一：轻轻松松给图片签名256

10.5定位实例二：文字阴影效果257

第11章CSS+div布局方法剖析259

11.1CSS排版观念260

11.1.1将页面用div分块260

11.1.2设计各块的位置262

11.1.3用CSS定位262

11.2固定宽度且居中的版式266

11.2.1方法一266

11.2.2方法二268

11.3左中右版式270

11.4块的背景色问题273

11.5排版实例：电子相册276

11.5.1搭建框架277

11.5.2幻灯片模式278

11.5.3详细信息模式282

11.6div排版与传统的表格方式排版的分析284

第12章CSS+div美化与布局实战287

12.1框架搭建289

12.2实例一：蓝色经典293

12.3实例二：清明上河图299

12.4实例三：交河故城305

12.5自动选择CSS样式310

第3部分CSS混合应用技术篇

第13章CSS与JavaScript的综合应用313

13.1JavaScript概述314

13.1.1JavaScript简介314

13.1.2JavaScript的特点314

13.1.3JavaScript与CSS315

13.2JavaScript语法基础315

13.2.1数据类型和变量317

13.2.2表达式及运算符318

13.2.3基本语句319

13.3实例一：输入时高亮显示的Excel表格323

13.4实例二：由远到近的文字325

13.5实例三：跑马灯特效327

13.6实例四：图片淡入淡出329

13.7实例五：CSS实现PPT幻灯片332

13.8实例六：灯光效果334

13.9实例七：舞台灯光336

13.10实例八：探照灯339

13.11实例九：鼠标文字跟随340

第14章CSS与XML的综合运用345

14.1XML基础346

14.1.1XML的特点346

14.1.2XML与HTML347

14.1.3XML基本语法349

14.2XML链接CSS文件352

14.3XML文字阴影效果353

14.4XML古诗字画356

14.5XML实现隔行变色的表格359

第15章CSS与Ajax的综合应用365

15.1Ajax概述366

15.1.1什么是Ajax366

15.1.2Ajax的关键元素367

15.1.3CSS的重要地位368

15.2Ajax入门370

15.2.1创建XMLHttpRequest对象370

15.2.2发出Ajax请求371

15.2.3处理服务器响应372

15.2.4加入CSS样式372

15.3Ajax实例：能够自由拖动布局区域的网页373

第4部分综合案例篇

第16章我的博客383

16.1分析构架384

16.1.1设计分析384

16.1.2排版构架384

16.2模块拆分386

16.2.1导航与Banner386

16.2.2左侧列表388

16.2.3内容部分392

16.2.4footer脚注394

16.3整体调整395

第17章小型工作室网站397

17.1分析构架398

17.1.1设计分析398

17.1.2首页排版399

17.1.3内容页构架400

17.2模块拆分400

17.2.1搭建首页400

17.2.2首页图片403

17.2.3内容页面405

17.2.4footer脚注407

17.3整体调整408

第18章企业网站409

18.1分析构架410

18.1.1设计分析410

18.1.2排版构架411

18.2模块拆分412

18.2.1Logo与顶端链接412

18.2.2左侧导航与搜索414

18.2.3主体内容416

18.2.4内容Banner416

18.2.5新闻快递416

18.2.6公司咨询417

18.2.7英文刊物419

18.3整体调整421

第19章网上购物网站423

19.1分析构架424

19.1.1设计分析424

19.1.2排版构架425

19.2模块分析426

19.2.1Banner图片426

19.2.2导航菜单428

19.2.3鲜花导购429

19.2.4主体内容433

19.3整体调整436

第20章旅游网站437

20.1分析构架438

20.1.1设计分析438

20.1.2排版构架438

20.2模块拆分440

20.2.1Banner图片与导航菜单440

20.2.2左侧分栏441

20.2.3中部主体443

20.2.4右侧分栏446

20.2.5脚注(footer)448

20.3整体调整449

　　本书系统地讲解了CSS层叠样式表的基础理论和实际运用技术，通过大量实例对CSS进行深入浅出的分析；着重讲解如何用CSS+DIV进行网页布局，注重实际操作，使读者在学习CSS应用技术的同时，掌握CSS+DIV的精髓；还详细讲解了其他书中较少涉及的技术细节，最后给出了5个常见类型的完整网页的综合实例，让读者进一步巩固所学到的知识，提高综合应用的能力。本书内容翔实、结构清晰、循序渐进，并注意各个章节与实例之间的呼应和对照，既可作为CSS初学者的入门教材，也适合中高级用户进一步学习和参考。
　　随着Web2.0的大潮席卷而来，网页标准化CSS+DIV的设计方式正逐渐取代传统的表格布局模式，对CSS的学习也成为设计人员的必修课。