精通HTML 5+CSS 3 100%网页设计与布局密码2025|PDF|Epub|mobi|kindle电子书版本百度云盘下载

精通HTML 5+CSS 3 100%网页设计与布局密码PDF格式电子书版下载

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

第1篇 HTML5篇2

第1章 HTML 5基础2

1.1 HTML 5简介3

1.1.1 HTML发展史3

1.1.2 浏览器兼容性分析3

1.1.3 效率和用户优先特性3

1.1.4 化繁为简的设计原则4

1.1.5 通用访问方式4

1.2 HTML 5的新变化5

1.2.1 语法的变化6

1.2.2 新增的元素和废除的元素6

1.2.3 新增的属性和废除的属性10

1.2.4 全局属性的变化14

1.3 HTML 5文件的编写方法17

1.3.1 使用记事本18

1.3.2 使用Dreamweaver19

1.3.3 编写第一个HTML 5网页文件20

高手私房菜22

技巧：使用记事本编辑HTML文件后在浏览器中预览22

第2章 HTML 5的基本结构23

2.1 HTML 5的适用范围24

2.2 使用浏览器查看HTML 5文件24

2.2.1 浏览器对HTML 5的兼容24

2.2.2 查看页面效果24

2.2.3 查看网页源文件25

2.3 一个简单的HTML 5页面25

2.3.1 搭建浏览器环境25

2.3.2 检测浏览器是否支持HTML标记26

2.3.3 用HTML标准结构编写“hello，world”页面27

2.4 HTML基本结构28

2.4.1 文档类型说明28

2.4.2 HTML标记28

2.4.3 头标记head29

2.4.4 标题标记title29

2.4.5 元信息标记meta30

2.4.6 网页的主体标记31

2.4.7 页面注释标记＜!----＞32

2.5 制作符合W3C标准的HTML 5网页33

高手私房菜34

技巧1：网页中常用的语言编码方式34

技巧2：网页中的基本标签是否必须成对出现34

第3章 网页文本设计35

3.1 添加网页文本36

3.1.1 普通文本36

3.1.2 特殊文字符号36

3.2 网页文本排版37

3.2.1 换行标记＜br＞与段落标记＜p＞37

3.2.2 标题标记＜h1＞～＜h6＞39

3.2.3 文本水平居中标记＜center＞40

3.3 成才教育网文本设计41

高手私房菜42

技巧：区别换行标记和段落标记42

第4章 网页色彩和图片设计43

4.1 网页色彩与图片44

4.2 网页图像的应用44

4.2.1 网页图片格式44

4.2.2 在网页中插入图像标记45

4.2.3 设置图像源文件46

4.2.4 设置图像在网页中的宽度和高度47

4.2.5 设置图像的提示文字48

4.3 制作茂森房地产广告网页49

高手私房菜50

技巧：alt属性的值50

第5章 网页列表和段落设计51

5.1 网页文字列表设计52

5.1.1 建立无序列表52

5.1.2 建立有序列表53

5.2 设置网页段落格式54

5.2.1 单词间隔55

5.2.2 字符间隔56

5.2.3 文字修饰57

5.2.4 垂直对齐方式58

5.2.5 水平对齐方式59

5.2.6 文本缩进61

5.2.7 文本行高62

5.2.8 处理空白63

5.3 制作图文混排型网页64

高手私房菜66

技巧：文字和图片的导航速度谁最快66

第6章 网页超链接设计67

6.1 链接和路径68

6.1.1 超链接的概念68

6.1.2 链接路径URL69

6.1.3 HTTP路径69

6.1.4 FTP路径70

6.1.5 电子邮件路径71

6.2 链接元素72

6.2.1 指定路径属性72

6.2.2 显示链接目标属性73

6.2.3 激活顺序属性75

6.2.4 链接的热键属性76

6.3 图像链接77

6.3.1 创建链接区域元素77

6.3.2 链接区域的名称属性77

6.3.3 定义鼠标敏感区元素77

6.3.4 链接的路径属性79

6.3.5 链接的文本说明属性80

6.3.6 使用图片中的链接81

高手私房菜82

技巧：区分URI、URL和URN82

第7章 网页多媒体设计83

7.1 HTML5中的Audio和Video84

7.1.1 视频容器84

7.1.2 音频解码器和视频解码器84

7.1.3 浏览器对Audio和Video标签的支持情况85

7.2 使用Audio和Video API85

7.2.1 理解媒体元素85

7.2.2 使用audio元素86

7.2.3 使用video元素87

7.3 设置网页多媒体属性88

7.4 调用网页多媒体的方法90

7.5 视频播放页面91

高手私房菜94

技巧：在Firefox 8.0中正常播放HTML 5支持的视频格式文件94

第8章 网页表单设计95

8.1 表单简介96

8.1.1 表单的用途96

8.1.2 表单的属性设置97

8.2 表单基本元素的应用98

8.2.1 文字字段98

8.2.2 密码框99

8.2.3 单选按钮100

8.2.4 复选框101

8.2.5 列表框102

8.2.6 列表项103

8.2.7 普通按钮104

8.2.8 提交按钮105

8.2.9 图像域106

8.3 表单高级元素的使用107

8.3.1 URL类型元素107

8.3.2 Email类型元素108

8.3.3 date类型元素109

8.3.4 time类型元素110

8.3.5 datetime类型元素110

8.3.6 datetime-local类型元素111

8.3.7 month类型元素112

8.3.8 week类型元素113

8.3.9 number类型元素114

8.3.10 range类型元素114

8.3.11 search类型元素115

8.3.12 tel类型元素116

8.3.13 color类型元素117

高手私房菜118

技巧1：在表单中实现文件上传框118

技巧2：解决单选按钮可以同时选中多个问题118

第9章 网页框架设计119

9.1 框架结构概述120

9.2 创建框架121

9.2.1 创建预定义的框架集122

9.2.2 向框架中添加内容123

9.2.3 创建嵌套框架集125

9.3 保存框架和框架集文件126

9.3.1 保存所有的框架集文件126

9.3.2 保存框架集文件127

9.3.3 保存框架文件127

9.4 选择框架和框架集127

9.4.1 在【框架】面板中选择框架和框架集128

9.4.2 在文档窗口中选择框架或框架集129

9.5 设置框架和框架集属性130

9.5.1 设置框架属性130

9.5.2 设置框架集属性131

9.5.3 改变框架的背景颜色131

9.6 使用＜iframe＞＜/iframe＞标签对创建嵌入式框架133

高手私房菜134

技巧1：框架长度或者宽度的设置134

技巧2：设置框架边框的注意事项134

第10章 HTML 5本地存储135

10.1 Web Storage存储136

10.1.1 sessionStorage对象136

10.1.2 localStorage对象137

10.2 操作localStorage138

10.2.1 清空localStorage数据138

10.2.2 遍历localStorage数据139

10.2.3 使用JSON对象存取数据139

10.2.4 管理localStorage数据142

10.3 WebSQL数据库应用142

10.3.1 打开与创建数据库143

10.3.2 执行事务143

10.3.3 插入数据143

10.3.4 数据管理144

高手私房菜144

技巧：Web SQL的使用144

第11章 构建HTML 5离线Web应用——缓存技术145

11.1 HTML 5离线Web应用概述146

11.2 使用HTML 5离线Web应用API146

11.2.1 检查浏览器的支持情况146

11.2.2 搭建简单的离线应用程序147

11.2.3 支持离线行为147

11.2.4 Manifest文件148

11.2.5 ApplicationCache API149

11.3 使用HTML 5离线Web应用构建应用150

11.3.1 创建记录资源的manifest文件150

11.3.2 创建构成界面的HTML和CSS151

11.3.3 创建离线的JavaScript152

11.3.4 检查applicationCache的支持情况154

11.3.5 为Update按钮添加处理函数154

11.3.6 添加Geolocation的支持情况155

11.3.7 添加Storage功能代码155

11.3.8 添加离线事件处理程序156

高手私房菜156

技巧1：不同的浏览器可以读取同一个Web中存储的数据吗156

技巧2：离线存储站点时是否需要浏览者同意156

第2篇 CSS 3篇158

第12章 CSS 3样式核心基础158

12.1 创建使用CSS的网页159

12.2 CSS语法书写标准161

12.2.1 规则块161

12.2.2 @规则161

12.2.3 规则集162

12.2.4 注释164

12.2.5 字符和大小写164

12.3 关键词和字符串165

12.3.1 客户端浏览器的特定扩展165

12.3.2 字符串165

12.4 CSS标准166

12.4.1 CSS样式标准166

12.4.2 传统HTML的缺点分析167

12.4.3 CSS样式的引用169

12.4.4 编辑CSS样式171

12.4.5 浏览器与CSS的兼容性分析171

12.5 使用CSS选择器172

12.5.1 标记选择器172

12.5.2 类别选择器173

12.5.3 ID选择器176

12.6 在HTML中调用CSS的方法177

12.6.1 直接定义CSS样式177

12.6.2 内嵌式CSS样式178

12.6.3 链接式CSS样式179

12.6.4 导入外部CSS样式180

12.6.5 CSS样式优先级181

高手私房菜182

技巧1：使用全局选择器“*”182

技巧2：简写CSS字体属性182

第13章 网页样式代码的生成方法183

13.1 从零开始手工编写184

13.1.1 编写标题样式代码185

13.1.2 编写图片控制代码186

13.1.3 设置网页正文187

13.1.4 设置整体页面样式187

13.1.5 定义段落样式188

13.2 完整网页代码分析188

13.2.1 获取网页代码189

13.2.2 查看网页样式代码190

13.2.3 分析网页样式代码结构191

13.2.4 读懂网页样式代码191

13.2.5 读懂CSS注释191

13.3 使用Dreamweaver辅助工具创建页面191

13.3.1 创建页面191

13.3.2 分析页面结构192

13.3.3 与手工编写的区别192

13.4 在Dreamweaver中新建CSS样式193

13.5 在Dreamweaver中编辑CSS样式194

13.6 为图像创建CSS样式195

高手私房菜196

技巧1：Dreamweaver CS6中快捷键的使用196

技巧2：超链接的一些特殊效果196

第14章 用CSS 3设置文本样式197

14.1 样式的参数单位198

14.2 设置网页文本的基本样式200

14.2.1 网页文本颜色的定义200

14.2.2 定义整体页面文本样式201

14.2.3 设置具体文字的字体203

14.2.4 设置文字的倾斜效果203

14.2.5 设置文字的粗细效果205

14.3 设置网页文本的行高与间距206

14.3.1 设置网页文字间距206

14.3.2 设置网页文字行高207

14.3.3 设置网页文字段落间距208

14.4 设置网页文本的对齐方式209

14.4.1 文本的水平对齐方式209

14.4.2 文本的垂直对齐方式211

14.5 设置文字与背景颜色212

14.5.1 使用样式参数进行设置212

14.5.2 更简洁的解决方案214

14.6 设置其他网页文本样式215

14.6.1 英文字母大小写的自动转换216

14.6.2 控制文字的大小217

14.6.3 网页文字的装饰效果218

14.6.4 设置段落首行缩进效果219

高手私房菜220

技巧：通过滤镜属性设置文字效果220

第15章 用CSS 3设置网页图像特效221

15.1 设置图像边框222

15.1.1 图像边框基本属性222

15.1.2 为不同的边框分别设置样式223

15.2 图像缩放功能的实现224

15.3 图文混排225

15.3.1 文字环绕226

15.3.2 设置图像与文字的间距227

15.4 制作长泰养生网页228

15.5 设置图像与文字的对齐方式231

15.5.1 横向对齐方式231

15.5.2 纵向对齐方式233

高手私房菜234

技巧1：解决在浏览器中图像无法显示的问题234

技巧2：解决图像超出撑破DIV的问题234

第16章 用CSS 3设置网页背景颜色与背景图像235

16.1 设置背景颜色236

16.2 设置背景图像237

16.3 设置背景图像平铺238

16.4 设置背景图像位置239

16.5 设置背景图像位置固定241

16.6 用图像替换标题的文本243

16.7 使用滑动门技术的标题244

高手私房菜245

技巧：为网页内容添加水印245

第17章 CSS 3的高级特性247

17.1 复合选择器248

17.1.1 交集选择器248

17.1.2 并集选择器249

17.1.3 后代选择器250

17.2 CSS的继承特性251

17.2.1 继承关系252

17.2.2 CSS继承的运用252

17.3 CSS的层叠特性253

高手私房菜256

技巧：CSS选择器的特殊性256

第18章 CSS定位与DIV布局核心技术257

18.1 块级元素和行内级元素258

18.1.1 块级元素和行内级元素的不同258

18.1.2 DIV元素和span元素260

18.2 使用DIV标记与span标记布局网页261

18.3 盒子模型262

18.3.1 盒子模型的概念262

18.3.2 网页border区域定义263

18.3.3 网页padding区域定义265

18.3.4 网页margin区域定义266

18.4 box类型和display属性268

18.4.1 HTML元素默认的box类型268

18.4.2 视点和Box容器269

18.4.3 块级元素和块级Box269

18.4.4 行内级元素和行内级Box270

18.4.5 插入式Box271

18.5 可视性271

18.6 综合实例273

18.6.1 图文层叠效果273

18.6.2 歌曲编辑列表275

18.6.3 文字阴影效果277

高手私房菜278

技巧1：visibility和display属性的区别278

技巧2：CSS border的默认值278

第19章 CSS＋DIV盒子的浮动与定位279

19.1 定义DIV280

19.1.1 什么是DIV280

19.1.2 插入DIV280

19.1.3 DIV的嵌套和固定格式281

19.2 CSS布局定位282

19.2.1 浮动定位282

19.2.2 position定位283

19.3 盒子的浮动285

19.4 盒子的定位287

19.4.1 静态定位288

19.4.2 相对定位288

19.4.3 绝对定位288

19.4.4 固定定位290

19.5 可视化盒子模型290

19.5.1 盒子模型290

19.5.2 视觉可视化模型290

19.5.3 空白边叠加290

19.6 固定宽度网页布局291

19.6.1 单列布局模式291

19.6.2 1-2-1型布局模式296

19.6.3 1-3-1型布局模式301

19.7 缩放网页302

19.7.1 1-2-1型布局模式网页的缩放302

19.7.2 1-3-1型布局模式网页的缩放303

19.7.3 变宽布局类型总结305

19.7.4 分列布局背景色305

高手私房菜306

技巧1：id和class属性名称使用限制306

技巧2：框架中百分比的关系306

第3篇 综合应用篇308

第20章 用HTML 5＋CSS 3设计与布局影音视频网站308

20.1 影音网站主页规划309

20.1.1 影音网站主页基本规划309

20.1.2 网页整体架构布局规划309

20.2 用DIV＋CSS布局309

20.2.1 布局页面头部结构309

20.2.2 布局页面中间部分310

20.2.3 布局页面底部310

20.3 制作网站的步骤311

20.3.1 使用HTML 5设计网站311

20.3.2 定义网站CSS样式312

20.3.3 设计顶部模块317

20.3.4 设计网站主体模块319

20.3.5 设计网站页面的底部320

20.4 微调网站细节321

20.4.1 部分内容调整321

20.4.2 模块调整321

20.4.3 调整后预览测试325

高手私房菜326

技巧：设置DIV垂直居中326

第21章 用HTML 5＋CSS 3设计与布局企业门户网站327

21.1 企业门户网站主页规划328

21.1.1 企业主页的配色328

21.1.2 架构企业主页布局328

21.1.3 用DIV布局页面框图329

21.2 制作网站的步骤329

21.2.1 使用HTML 5设计网站329

22.2.2 定义网站CSS样式330

21.2.3 设计网页顶部模块332

21.2.4 设计网页中间主体模块333

21.2.5 设计网页底部模块335

21.3 微调网站细节335

21.3.1 部分内容调整335

21.3.2 模块调整336

21.3.3 调整后预览测试337

高手私房菜338

技巧1：在IE浏览器中解决双边距问题338

技巧2：定义元素外边距的注意事项338

第22章 用HTML 5＋CSS 3设计与布局电子商务网站339

22.1 电子商务网站主页规划340

22.1.1 分析主页需求341

22.1.2 确定内容模块341

22.1.3 画出效果图342

22.2 制作网站的步骤342

22.2.1 使用HTML 5设计网站342

22.2.2 定义网站CSS样式342

22.2.3 设计网页头部343

22.2.4 设计分类及区域选择模块345

22.2.5 设计新品展示模块347

22.2.6 设计侧边栏模块348

22.2.7 设计热门城市索引模块353

22.2.8 设计底部模块354

22.3 微调网站细节355

22.3.1 部分内容调整355

22.3.2 模块调整356

22.3.3 调整后预览测试356

高手私房菜356

技巧1：使三层并列网页在IE和Firefox中显示效果相同356

技巧2：在IE中，解决图片和下方父元素产生的间隙的问题356

第23章 用HTML 5＋CSS 3设计与布局休闲旅游网站357

23.1 休闲旅游网站主页规划358

23.1.1 旅游网站主页基本规划358

23.1.2 网页整体架构布局规划358

23.1.3 用DIV＋CSS布局网页框架358

23.2 制作网站的步骤358

23.2.1 使用HTML 5设计网站358

23.2.2 定义网站CSS样式359

23.2.3 设计页面头部模块360

23.2.4 设计页面中间部分模块362

23.2.5 设计页面底部模块363

23.2.6 微调网站细节并预览363

高手私房菜364

技巧1：定义块的高度时，如果高度小于10px，则显示10px，怎么解决364

技巧2：在浏览器中，列表选项li为浮动时，列表后面的元素不能换行，怎么解决364

第4篇 实战篇366

第24章 新闻类网站布局分析366

24.1 凤凰网整体布局分析367

24.1.1 整体布局分析367

24.1.2 版面架构分析367

24.1.3 首页分析368

24.2 新华网整体布局分析369

24.2.1 整体布局分析369

24.2.2 版面架构分析370

24.2.3 网站模块组成370

24.3 制作自己的新闻网站—龙马新闻网371

24.3.1 需求分析371

24.3.2 结构与布局371

24.3.3 网站制作步骤371

高手私房菜378

技巧1：表单输入单元的覆盖删除效果378

技巧2：表单输入单元的单击删除效果378

第25章 微博／博客类网站布局分析379

25.1 新浪微博／博客整体布局380

25.1.1 布局结构分析380

25.1.2 版面架构分析380

25.1.3 模块组成381

25.2 腾讯微博／博客网站382

25.2.1 布局结构分析382

25.2.2 版面架构分析382

25.2.3 模块组成383

25.3 制作自己的网站—龙马微博／博客网384

25.3.1 需求分析384

25.3.2 结构与布局385

25.3.3 网站制作步骤385

高手私房菜394

技巧1：善用CSS缩写可以减少页面文件大小394

技巧2：颜色代码的缩写394