21天精通HTML 5+CSS 3网页设计【2025|PDF|Epub|mobi|kindle电子书版本百度云盘下载】

21天精通HTML 5+CSS 3网页设计PDF格式电子书版下载

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

第1部分 了解网页设计基础知识3

第1天 网页与网站基础知识3

1.1认识网页和网站3

1.1.1什么是网页3

1.1.2什么是网站4

1.2网页的相关概念6

1.2.1浏览器6

1.2.2网页与HTML7

1.2.3URL、域名与IP地址8

1.2.4网站上传和下载9

1.3网页的HTML构成10

1.3.1文档标记11

1.3.2头部标记12

1.3.3主体标记13

1.4HTML常用标记14

1.4.1链接标记〈LINK〉14

1.4.2段落标记〈P〉15

1.4.3通用块标记〈DIV〉17

1.4.4行内标记〈SPAN〉18

1.4.5元数据标记〈META〉19

1.4.6图像标记〈IMG〉20

1.4.7框架容器标记〈FRAMESET〉22

1.4.8子框架标记〈FRAME〉22

1.4.9表格标记〈TABLE〉24

1.4.10浮动帧标记〈Iframe〉26

1.4.11滚动标记〈marquee〉27

1.5技能训练1——制作日程表29

1.6技能训练2——保存整站32

第2天 认识Web新面孔——HTML 5新增元素与属性速览36

2.1新增的主体结构元素36

2.1.1section元素36

2.1.2article元素36

2.1.3aside元素37

2.1.4nav元素37

2.2新增的非主体结构元素37

2.2.1header元素37

2.2.2hgroup元素38

2.2.3footer元素38

2.2.4figure元素39

2.3新增的其他元素39

2.3.1新增input元素的类型39

2.3.2其他元素39

2.4新增的属性和废除的属性42

2.4.1新增的表单属性42

2.4.2新增的链接相关属性45

2.4.3新增的其他属性45

2.4.4废除的属性45

2.5新增的全局属性47

2.5.1contentEditable属性47

2.5.2designMode属性48

2.5.3hidden属性48

2.5.4spellcheck属性48

2.5.5tabIndex属性49

第3天 读懂样式表密码——网页设计中的CSS 351

3.1认识CSS 351

3.1.1CSS 3简介51

3.1.2CSS 3发展历史52

3.1.3浏览器与CSS 352

3.2样式表的基本用法53

3.2.1在HTML中插入样式表53

3.2.2单独的链接CSS文件53

3.3CSS 3新增的选择器54

3.3.1属性选择器55

3.3.2结构伪类选择器56

3.3.3UI元素状态伪类选择器57

3.4技能训练——制作彩色标题59

第2部分 使用HTML 5的高级应用66

第4天 网页将变得更加活泼——网页表单技术应用66

4.1新增HTML5表单66

4.1.1基本表单元素68

4.1.2高级表单元素75

4.1.3新增表单元素84

4.2新增表单属性86

4.2.1autocomplete属性86

4.2.2min.max和step属性87

4.2.3multiple属性88

4.2.4placeholder属性88

4.2.5required属性89

4.3技能训练——创建用户注册页面90

第5天 让页面从此告别单调——网页多媒体应用92

5.1音/视频容器与视频编/解码器92

5.1.1视频容器92

5.1.2音频和视频编/解码器93

5.1.3audio和video元素的浏览器支持情况93

5.1.4在HTML 4和HTML 5中播放多媒体的异同94

5.2属性与方法94

5.2.1理解媒体元素94

5.2.2使用audio元素95

5.2.3使用video元素96

5.3事件触发机制97

5.3.1事件概述97

5.3.2事件处理应用99

5.4技能训练——为网页添加背景音乐103

第6天 网页中的北斗星——获取地理位置104

6.1Geolocation API获取地理位置104

6.1.1地理定位的原理104

6.1.2地理定位的方法105

6.1.3指定纬度和经度坐标105

6.1.4如何获取位置信息108

6.2技能训练——在网页中调用百度地图109

第7天 通信不再是件难事儿——Web通信新技术112

7.1跨文档消息传输112

7.1.1跨文档消息传输的基本知识112

7.1.2跨文档通信应用测试113

7.2Web Sockets API114

7.2.1Web Sockets通信基础115

7.2.2服务器端使用Web Sockets API117

7.2.3客户端使用Web Sockets API120

7.3技能训练——编写简单的Web Socket服务器120

第8天 把数据放至客户端——本地存储技术126

8.1认识Web Storage126

8.2使用HTML 5 Web Storage API126

8.2.1sessionStorage对象应用127

8.2.2localStorage对象应用128

8.2.3Web Storage API的其他操作130

8.3在本地建立数据库133

8.3.1本地数据库概述133

8.3.2用executeSql来插入数据134

8.3.3使用transaction方法处理事件134

8.4技能训练——制作简单的Web留言本134

第9天 让通信更顺畅——线程处理138

9.1Web Worker概述138

9.2线程中常用的变量、函数与类139

9.3与线程进行数据交互140

9.4线程嵌套142

9.4.1技能训练1——单线程嵌套142

9.4.2技能训练2——多个子线程中的数据交互145

第10天 浏览页面更快捷——构建离线应用程序147

10.1HTML 5离线应用程序147

10.1.1本地缓存147

10.1.2浏览器网页缓存与本地缓存的区别147

10.1.3目前浏览器对Web离线应用的支持情况148

10.1.4支持离线行为148

10.2了解manifest（清单）文件149

10.3了解applicationCache API150

10.4技能训练——离线定位跟踪152

第3部分 使用CSS 3控制网页样式160

第11天 网页上温暖的光芒——CSS 3控制网页文本样式160

11.1CSS 3文字样式160

11.1.1定义文字的颜色160

11.1.2定义文字的字体161

11.1.3定义文字的字号162

11.1.4加粗字体163

11.1.5定义文字的风格165

11.1.6文字的阴影效果165

11.1.7控制溢出文本166

11.1.8控制换行168

11.1.9字体复合属性169

11.1.10文字修饰效果170

11.2CSS 3段落文字171

11.2.1设置字符间隔171

11.2.2设置单词间隔172

11.2.3水平对齐方式173

11.2.4垂直对齐方式174

11.2.5文本缩进176

11.2.6文本行高177

11.3技能训练——网页图文混排效果178

第12天 同一张图却有着不一样的风景——CSS 3控制网页图像样式180

12.1图片缩放180

12.1.1通过标记设置图片大小180

12.1.2使用CSS 3中的width和height181

12.1.3使用CSS 3中的max-width和max-height181

12.2设置图片的边框183

12.3图片的对齐方式184

12.3.1横向对齐方式184

12.3.2纵向对齐方式185

12.4图文混排效果187

12.4.1设置图片与文字间距187

12.4.2文字环绕效果188

12.5技能训练——酒店宣传单189

第13天 不可思议的杰作——CSS 3控制表格、表单与菜单样式193

13.1CSS 3与表格193

13.1.1表格的基本样式193

13.1.2表格边框宽度196

13.1.3表格边框颜色197

13.1.4技能训练1——隔行变色199

13.1.5技能训练2——鼠标悬浮变色表格202

13.2CSS 3与表单205

13.2.1美化表单中的元素206

13.2.2美化下拉菜单207

13.2.3美化提交按钮209

13.2.4技能训练3——美化注册表单211

13.2.5技能训练4——美化登录表单214

13.3CSS 3与菜单216

13.3.1美化无序列表216

13.3.2美化有序列表218

13.3.3图片列表220

13.3.4列表缩进222

13.3.5无须表格的菜单223

13.3.6菜单的横竖转换226

13.4技能训练5——制作soso导航栏228

第14天 风景这边独好——CSS 3控制鼠标与超链接样式232

14.1鼠标特效232

14.1.1如何控制鼠标箭头232

14.1.2鼠标变换效果234

14.2超链接特效235

14.2.1改变超链接基本样式235

14.2.2设置超链接背景图238

14.2.3超链接按钮效果239

14.3技能训练1——制作图片鼠标放置特效240

14.4技能训练2——制作图片超链接242

第15天 让一切趋近于完美——CSS 3滤镜样式应用245

15.1什么是CSS滤镜245

15.2通道（Alpha）246

15.3模糊（Blur）248

15.4透明色（Chroma）249

15.5翻转变换（Flip）250

15.6光晕（Glow）252

15.7灰度（Gray）253

15.8反色（Invert）254

15.9遮罩（Mask）255

15.10阴影（Shadow）256

15.11 X射线（X-ray）257

15.12图像切换（RevealTrans）258

15.13波浪（Wave）260

15.14渐隐渐现（BlendTrans）261

15.15 立体阴影（DropShadow）263

15.16灯光滤镜（Light）264

第16天 创造力不再是神话——CSS 3完善的网页美化设计267

16.1增强的边框属性267

16.1.1 border-color属性267

16.1.2 border-image属性269

16.2增强的背景图像属性271

16.2.1 background属性271

16.2.2 background-origin属性272

16.2.3 background-clip属性274

16.2.4 background-size属性276

16.2.5 overflow-x和overflow-y属性279

16.3增强的其他属性281

16.3.1 border-radius属性281

16.3.2 box-shadow属性282

16.3.3 box-sizing属性283

16.3.4 resize属性284

16.3.5 outline属性285

16.3.6 nav-index属性287

16.3.7 content属性289

第4部分 HTML 5+CSS 3综合实战293

第17天 服务类网站设计293

17.1网站规划与分析293

17.1.1网站框架设计293

17.1.2网站栏目划分293

17.1.3网站模块划分294

17.1.4网站色彩搭配296

17.2修改样式表确定网站风格296

17.2.1修改网站通用样式296

17.2.2修改网站布局样式297

17.3借用其他网站优秀模块299

17.3.1导航条模块实现299

17.3.2首页主体布局模块实现301

17.3.3网页特效显示模块实现305

第18天 休闲旅游类网站设计309

18.1休闲旅游类网站主页规划309

18.1.1旅游网站主页配色规划309

18.1.2网页整体架构布局规划310

18.1.3用DIV+CSS布局网页框架310

18.2制作网站的步骤311

18.2.1使用HTML 5设计网站311

18.2.2定义网站CSS样式311

18.2.3设计页面头部模块318

18.2.4设计页面中间部分模块320

18.2.5设计页面底部模块322

18.2.6微调网站细节并预览323

第19天 时尚音乐类网站设计324

19.1时尚音乐类网站的构思布局324

19.1.1设计分析324

19.1.2排版架构325

19.2制作网站的步骤327

19.2.1页头部分327

19.2.2左侧内容列表329

19.2.3中间内容列表331

19.2.4右侧内容列表333

19.2.5页脚部分334

19.3完善网站的效果335

19.3.1页面内容主体调整335

19.3.2页面整体调整337

第20天 商业门户类网站设计339

20.1商业门户类网站整体设计339

20.1.1颜色应用分析340

20.1.2架构布局分析340

20.2制作网站的步骤341

20.2.1网页整体样式插入341

20.2.2网页局部样式343

20.2.3顶部模块样式代码分析350

20.2.4中间主体代码分析351

20.2.5底部模块分析355

20.3完善网站的效果355

20.3.1部分内容调整355

20.3.2模块调整356

20.3.3调整后预览测试358

第21天 网页设计模块化重组秘籍359

21.1网站类型分析与重组359

21.2网站建站特点分析360

21.2.1用户群分析360

21.2.2建站设计分析361

21.3网站设计布局361

21.3.1整体布局设计分析362

21.3.2各模块化设计分析362

21.3.3颜色搭配分析362

21.4网站制作详细步骤363

21.4.1CSS样式表分析363

21.4.2网页头部设计分析364

21.4.3主体第一通栏368

21.4.4主体第二通栏373

21.4.5主体第三通栏380

21.4.6网页底部模块分析383