DIV+CSS 3网页样式与布局全程揭秘 第2版PDF|Epub|txt|kindle电子书版本网盘下载

DIV+CSS 3网页样式与布局全程揭秘 第2版PDF格式电子书版下载

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

第1章 网页和网站开发知识1

1.1 了解网页1

1.1.1 网页与网站的关系1

1.1.2 网页的基本构成元素2

1.2 如何设计网页3

1.2.1 什么是网页设计3

1.2.2 网页设计的特点3

1.2.3 网页设计相关术语4

1.2.4 常见网站类型7

1.3 关于表格布局8

1.3.1 表格布局的特点9

1.3.2 冗余的嵌套表格和混乱的结构9

1.4 关于DIV+CSS布局10

1.4.1 DIV+CSS布局的特点10

1.4.2 DIV+CSS布局的优势10

1.5 Web标准11

1.5.1 什么是Web标准11

1.5.2 Web标准的内容11

1.5.3 结构、表现、行为和内容12

1.5.4 遵循Web标准的好处13

1.6 网站开发流程13

1.6.1 网站策划13

1.6.2 规划网站结构14

1.6.3 素材收集整理14

1.6.4 网页版式与布局分析14

1.6.5 确定网站主色调15

1.6.6 设计网站页面15

1.6.7 切割和优化网页16

1.6.8 制作HTML页面16

1.6.9 使用CSS样式控制网页外观16

1.6.10 为网页应用JavaScript特效17

1.6.11 网站后台程序开发17

1.6.12 申请域名和服务器空间17

1.6.13 测试并上传网站17

1.7 本章小结17

第2章 HTML、XHTML和HTML518

2.1 HTML与XHTML18

2.1.1 HTML与XHTML的区别18

2.1.2 使用XHTML的优点18

2.2 HTML基础19

2.2.1 了解HTML19

2.2.2 HTML的作用20

2.2.3 HTML的基础结构20

2.2.4 HTML的基本语法21

2.3 HTML常用标签21

2.3.1 区块标签22

2.3.2 文本标签22

2.3.3 格式标签23

2.3.4 图像标签23

2.3.5 表格标签24

2.3.6 超链接标签24

2.4 XHTML基础25

2.4.1 了解XHTML25

2.4.2 XHTML文档的基本结构25

2.4.3 3种不同的XHTML文档类型26

2.4.4 严谨的代码27

2.4.5 制作HTML页面29

实例01+视频：制作简单的HTML页面29

2.5 HTML5基础30

2.5.1 了解HTML530

2.5.2 HTML5的简化操作31

2.5.3 HTML5新增标签31

2.5.4 HTML5废弃标签33

2.5.5 HTML5新增选择器33

2.5.6 HTML5的优势34

2.6 HTML5的应用35

2.6.1 <canvas>标签35

实例02+视频：在网页中实现绘图效果35

2.6.2 <audio>标签37

实例03+视频：在网页中嵌入音频37

2.6.3 <video>标签38

实例04+视频：在网页中嵌入视频39

2.7 本章小结40

第3章 CSS样式入门41

3.1 初识CSS样式41

3.1.1 为什么要使用CSS样式41

3.1.2 在网页中使用CSS样式的优势42

3.1.3 CSS样式的作用43

3.1.4 CSS样式的局限性44

3.1.5 CSS样式基础语法44

3.1.6 认识CSS规则的构成45

3.2 CSS选择符46

3.2.1 通配选择符46

实例05+视频：航天科技网页46

3.2.2 标签选择符48

实例06+视频：酒店网站页面48

3.2.3 ID选择符50

实例07+视频：制作科技网站页面50

3.2.4 类选择符51

实例08+视频：设置活动网站页面文字52

3.2.5 伪类和伪对象选择符53

实例09+视频：设置酒店网站文字链接效果54

3.2.6 群选择符55

实例10+视频：设置女装网站图片效果55

3.2.7 派生选择符57

实例11+视频：运动鞋网站页面57

3.3 CSS 3中新增的选择符58

3.3.1 属性选择符58

3.3.2 结构伪类选择符59

3.3.3 UI元素状态伪类选择符60

3.4 在网页中应用CSS样式的4种方法60

3.4.1 内联CSS样式60

实例12+视频：使用style属性添加内联CSS样式61

3.4.2 内部CSS样式62

实例13+视频：使用<style>标签添加内部CSS样式62

3.4.3 链接外部CSS样式文件63

实例14+视频：使用<link>标签链接外部CSS样式文件64

3.4.4 导入外部CSS样式文件66

实例15+视频：使用@import命令导入外部CSS样式文件66

3.5 CSS样式的特性67

3.5.1 继承性67

3.5.2 特殊性68

3.5.3 层叠性68

3.5.4 重要性69

3.6 CSS样式中的颜色设置和单位69

3.6.1 CSS中的多种颜色设置方法69

3.6.2 CSS中的绝对单位71

3.6.3 CSS中的相对单位71

3.7 本章小结71

第4章 使用CSS设置文本和段落样式72

4.1 设置文本CSS样式72

4.1.1 设置字体font-family72

实例16+视频：设置欢迎页面中的字体72

4.1.2 设置字体大小font-size74

实例17+视频：设置网站欢迎页面中的字体大小74

4.1.3 设置字体颜色color75

实例18+视频：设置网站欢迎页面中的文字颜色75

4.1.4 设置字体粗细font-weight77

实例19+视频：设置网页中的重要文字加粗77

4.1.5 设置字体样式font-style79

实例20+视频：设置网页中文字倾斜79

4.1.6 设置英文字体大小写text-transform80

实例21+视频：设置网页中的英文大小写81

4.1.7 设置文字修饰text-decoration82

实例22+视频：为网页中文字添加下划线、顶划线和删除线82

4.2 设置段落样式84

4.2.1 字间距letter-spacing84

实例23+视频：控制网页中文字间距84

4.2.2 行间距line-height85

实例24+视频：控制网页中文本行间距85

4.2.3 段落首字下沉86

实例25+视频：实现网页中段落文字下沉效果87

4.2.4 段落首行缩进text-indent88

实例26+视频：实现网页中段落文字的首行缩进88

4.2.5 段落水平对齐text-align89

实例27+视频：实现网页中文字水平居中对齐89

4.2.6 文本垂直对齐vertical-align91

实例28+视频：实现网页中文本垂直居中对齐91

4.3 CSS类选区92

实例29+视频：个人卡通网站欢迎页92

4.4 在网页中应用特殊字体94

实例30+视频：在卡通网页中使用特殊字体94

4.5 本章小结97

第5章 使用CSS设置背景和图片样式98

5.1 设置背景颜色CSS样式98

5.1.1 背景颜色background-color98

实例31+视频：为网页设置整体背景颜色98

5.1.2 为页面元素设置不同的背景颜色100

实例32+视频：设置不同背景颜色区分网页元素100

5.2 设置背景图像CSS样式101

5.2.1 背景图像background-image101

实例33+视频：设置图片网站背景图像101

5.2.2 背景图像重复方式background-repeat102

实例34+视频：实现重复显示的背景图像102

5.2.3 背景图像固定background-attachment104

实例35+视频：文本介绍网页固定的背景104

5.2.4 背景图像位置background-position105

实例36+视频：通过背景定位实现图文混排效果106

5.3 设置图片CSS样式107

5.3.1 图片边框border107

实例37+视频：设置卡通网站中的图片边框108

5.3.2 图片缩放109

实例38+视频：实现跟随浏览器窗口缩放的图片109

5.3.3 图片水平对齐111

实例39+视频：设置网页中图像的水平对齐效果111

5.3.4 图片的垂直对齐112

实例40+视频：设置网页中图像的垂直对齐效果112

5.4 在网页中实现图文混排114

5.4.1 使用CSS样式实现文本绕图效果114

实例41+视频：实现图文介绍页面文本绕图114

5.4.2 设置文本绕图间距115

实例42+视频：美化图文介绍页面115

5.5 网页中特殊的图像效果应用116

5.5.1 全屏大图切换117

实例43+视频：设计作品展示页面117

5.5.2 鼠标经过图像动态效果119

实例44+视频：制作图片展示网页119

5.6 本章小结122

第6章 使用CSS设置列表样式123

6.1 了解网页中的列表123

6.2 设置列表的CSS样式124

6.2.1 ul无序项目列表124

实例45+视频：制作网站新闻列表124

6.2.2 有序编号列表125

实例46+视频：制作音乐排行榜126

6.2.3 定义列表127

实例47+视频：制作游戏新闻栏目127

6.2.4 更改列表项目样式128

实例48+视频：更改某一个项目列表符号128

6.2.5 自定义列表符号130

实例49+视频：图像列表符号的应用130

6.3 使用列表制作导航菜单131

6.3.1 使用CSS样式创建横向导航菜单131

实例50+视频：制作游戏网站导航131

6.3.2 使用CSS样式创建竖向导航菜单132

实例51+视频：制作汽车网站竖向导航133

6.4 列表在网页中的特殊应用134

6.4.1 滚动图像134

实例52+视频：在网页中实现四图横向滚动效果134

6.4.2 动态堆叠卡138

实例53+视频：制作个性网站欢迎页面138

6.5 本章小结142

第7章 使用CSS设置超链接样式143

7.1 了解网页超链接143

7.1.1 什么是超链接143

7.1.2 关于链接路径144

7.1.3 超链接对象144

7.1.4 创建超链接原则145

7.2 CSS样式伪类145

7.2.1 :link伪类145

7.2.2 :hover伪类146

7.2.3 :active伪类146

7.2.4 :visited伪类147

7.3 超链接CSS样式应用147

7.3.1 超链接文字样式147

实例54+视频：设置游戏网站文字超链接效果147

7.3.2 按钮式超链接150

实例55+视频：制作设计网站导航菜单150

7.3.3 为超链接添加背景152

实例56+视频：背景翻转导航菜单152

7.4 设置网页中的光标效果154

实例57+视频：自定义网页中的光标效果155

7.5 超链接在网页中的特殊应用156

7.5.1 倾斜导航菜单156

实例58+视频：玩具网站倾斜导航157

7.5.2 动感超链接159

实例59+视频：卡通网站动感导航菜单159

7.6 本章小结163

第8章 使用CSS设置表格样式164

8.1 了解表格164

8.1.1 认识表格标签与结构164

8.1.2 表格标题<caption>标签166

8.1.3 表格列<colgroup>和<col>标签167

8.1.4 水平对齐和垂直对齐168

8.2 使用CSS样式控制表格外观170

8.2.1 设置表格边框170

实例60+视频：制作网站新闻栏目170

8.2.2 设置表格背景颜色172

实例61+视频：使用背景颜色美化表格172

8.2.3 设置表格背景图像173

实例62+视频：使用背景图像美化表格173

8.3 使用CSS样式实现表格特效175

8.3.1 设置单元行背景颜色175

实例63+视频：实现隔行变色的表格175

8.3.2 :hover伪类在表格中的应用177

实例64+视频：使用CSS实现表格的交互效果177

8.4 本章小结178

第9章 使用CSS设置表单元素样式179

9.1 关于表单179

9.1.1 表单标签<form>179

9.1.2 输入标签<input>180

9.1.3 文本域标签<textarea>180

9.1.4 选择域标签<select>和<option>181

9.1.5 其他表单元素182

9.1.6 关于<label>、<legend>和<fieldset>标签183

实例65+视频：创建简单的网页表单183

9.2 使用CSS样式控制表单元素185

9.2.1 使用CSS样式设置表单元素的背景色和边框186

实例66+视频：制作网站登录页面186

9.2.2 使用CSS样式实现圆角文本字段189

实例67+视频：制作圆角登录框189

9.2.3 使用CSS样式设置下拉列表效果191

实例68+视频：制作网站搜索栏191

9.3 表单在网页中的特殊应用194

9.3.1 聚焦型提示语消失194

实例69+视频：文本字段提示语效果1194

9.3.2 输入型提示语消失196

实例70+视频：文本字段提示语效果2197

9.4 本章小结198

第10章 CSS滤镜的应用199

10.1 关于CSS滤镜199

10.1.1 什么是CSS滤镜199

10.1.2 CSS滤镜语法199

10.2 在网页中应用CSS滤镜200

10.2.1 Alpha滤镜200

实例71+视频：实现网页中图像的半透明效果201

10.2.2 BlendTrans滤镜203

实例72+视频：实现网页中图像的渐隐渐现效果203

10.2.3 Blur滤镜205

实例73+视频：实现网页中图像的模糊效果205

10.2.4 Chroma滤镜206

实例74+视频：将网页中指定颜色设置为透明206

10.2.5 DropShadow与Shadow滤镜207

实例75+视频：为网页中的元素添加阴影效果208

10.2.6 FlipH与FlipV滤镜210

实例76+视频：实现网页中元素的水平和垂直翻转210

10.2.7 Glow滤镜211

实例77+视频：为网页中的文字添加光晕效果211

10.2.8 Gray滤镜与Invert滤镜213

实例78+视频：实现黑白网页效果213

10.2.9 Light滤镜214

实例79+视频：在网页中实现聚光灯效果214

10.2.10 Mask滤镜216

实例80+视频：实现文字遮罩效果216

10.2.11 RevealTrans滤镜217

实例81+视频：实现图像的动态转换217

10.2.12 Wave滤镜219

实例82+视频：实现网页中图像的波纹效果219

10.2.13 Xray滤镜220

实例83+视频：将网页中的图像处理为X光片效果220

10.3 本章小结222

第11章 CSS高级应用与CSS3属性223

11.1 <div>与<span>标签的区别223

11.2 如何简写CSS样式224

11.2.1 颜色值简写224

11.2.2 简写font属性224

11.2.3 简写background属性225

11.2.4 简写border属性226

11.2.5 简写margin和padding属性227

11.2.6 简写list属性228

11.3 优化CSS样式228

11.3.1 CSS选择符的命名规范229

11.3.2 重用CSS样式229

11.3.3 覆盖的方法简化CSS样式229

11.4 CSS 3中新增的颜色定义方法230

11.4.1 HSL和HSLA方法230

实例84+视频：使用HSL方式定义网页元素背景颜色231

11.4.2 RGBA方法232

实例85+视频：使用RGBA方式定义网页元素背景颜色232

11.5 CSS 3新增内容和透明度属性233

11.5.1 内容content234

实例86+视频：为网页中的元素赋予内容234

11.5.2 透明度opacity235

实例87+视频：设置图片半透明效果235

11.6 CSS 3中新增文字效果设置236

11.6.1 文字阴影text-shadow236

实例88+视频：为网页中的文字添加阴影效果237

11.6.2 文本溢出处理text-overflow238

实例89+视频：设置溢出文本显示为省略号238

11.7 CSS 3中新增背景效果设置240

11.7.1 背景图像大小background-size240

实例90+视频：控制网页元素背景图像大小240

11.7.2 背景图像显示区域background-origin242

实例91+视频：控制背景图像显示位置242

11.7.3 背景图像裁剪区域background-clip243

实例92+视频：控制背景图像裁剪243

11.8 CSS 3中新增边框效果设置245

11.8.1 多重边框颜色border-colors245

实例93+视频：为网页中的图像添加多彩边框245

11.8.2 圆角边框border-radius246

实例94+视频：为网页元素添加圆角边框效果246

11.8.3 图像边框border-image248

实例95+视频：设置网页元素的图像边框效果248

11.9 CSS 3新增界面相关属性249

11.9.1 元素阴影box-shadow249

实例96+视频：为网页元素添加阴影效果250

11.9.2 内容溢出处理overflow251

实例97+视频：为网页中的溢出文本添加滚动条251

11.9.3 区域缩放调节resize252

实例98+视频：实现网页中可以自由缩放的文本区域253

11.9.4 轮廓外边框outline254

实例99+视频：为网页中的图像添加轮廓外边框效果254

11.9.5 多列布局column255

实例100+视频：实现网页文章的分栏显示255

11.9.6 导航序列号nav-index256

11.10 CSS 3其他新增属性257

11.10.1 判断对象@media257

实例101+视频：根据浏览器窗口不同显示不同的背景颜色257

11.10.2 加载服务器端字体@font-face258

11.11 使用CSS 3制作网页特效259

实例102+视频：网页动态交互导航菜单259

11.12 本章小结263

第12章 使用DIV+CSS布局网页264

12.1 关于Div264

12.1.1 什么是Div264

12.1.2 如何在网页中插入Div264

12.2 id与class266

12.2.1 什么是id266

12.2.2 什么时候使用id266

12.2.3 什么是class267

12.2.4 什么时候使用class267

12.3 CSS盒模型268

12.3.1 什么是CSS盒模型268

12.3.2 CSS盒模型的要点269

12.3.3 margin属性269

实例103+视频：制作房产网站欢迎页269

12.3.4 border属性271

实例104+视频：制作图片网页271

12.3.5 padding属性272

实例105+视频：控制图像与边界距离272

12.3.6 content部分274

12.4 CSS 3新增弹性盒模型274

12.4.1 box-orient属性控制盒子取向274

12.4.2 box-direction属性控制盒子顺序276

12.4.3 box-ordinal-group属性控制盒子位置278

12.4.4 box-flex属性控制盒子弹性空间280

12.4.5 盒子空间管理box-pack和box-align属性282

12.4.6 盒子空间溢出管理box-lines属性284

12.5 网页元素定位284

12.5.1 关于position属性284

12.5.2 relative定位方式285

实例106+视频：实现图像叠加效果285

12.5.3 absolute定位方式286

实例107+视频：制作科技公司网站页面287

12.5.4 fixed定位方式288

实例108+视频：固定不动的网站导航菜单289

12.5.5 float定位方式290

实例109+视频：制作图片列表页面290

12.5.6 空白边叠加293

实例110+视频：空白边叠加在网页中的应用293

12.6 常用DIV+CSS布局解析294

12.6.1 内容居中的网页布局295

12.6.2 浮动的网页布局295

12.6.3 自适应高度的解决方法298

12.7 流体网格布局299

实例111+视频：制作适用手机浏览的网页299

12.8 本章小结304

第13章 CSS与JavaScript实现网页特效305

13.1 JavaScript基础305

13.1.1 JavaScript的发展305

13.1.2 JavaScript的特点306

13.1.3 JavaScript语法中的基本要求306

13.1.4 CSS样式与JavaScript308

13.2 使用JavaScript的方法308

13.2.1 使用<Script>标签嵌入JavaScript代码309

13.2.2 调用外部js脚本文件309

13.2.3 直接位于事件处理部分的代码中309

13.3 JavaScript中的数据类型和变量310

13.3.1 数据类型310

13.3.2 变量310

13.4 JavaScript运算符311

13.4.1 算术运算符311

13.4.2 逻辑运算符311

13.4.3 比较运算符311

13.5 JavaScript程序语句311

13.5.1 if条件语句311

13.5.2 switch条件语句312

13.5.3 for循环语句312

13.5.4 while循环语句313

13.6 使用Spry实现网页特效313

13.6.1 Spry菜单栏313

实例112+视频：制作下拉导航菜单313

13.6.2 Spry选项卡式面板317

实例113+视频：制作网页新闻选项卡317

13.6.3 Spry折叠式320

实例114+视频：制作产品介绍页面320

13.6.4 Spry可折叠面板323

实例115+视频：制作家居网站323

13.6.5 Spry工具提示325

实例116+视频：制作作品展示网页325

13.7 常见网页特效326

13.7.1 广告切换效果327

实例117+视频：制作简洁的左右轮换广告效果327

13.7.2 页面切换331

实例118+视频：全屏页面切换效果331

13.8 本章小结337

第14章 商业案例实战338

14.1 企业网站338

14.1.1 设计分析338

14.1.2 布局分析338

14.1.3 案例制作339

14.2 儿童用品网站344

14.2.1 设计分析345

14.2.2 布局分析345

14.2.3 案例制作345

14.3 游戏网站351

14.3.1 设计分析351

14.3.2 布局分析351

14.3.3 案例制作351

14.4 本章小结361