Div+CSS+jQuery布局精粹【2025|PDF|Epub|mobi|kindle电子书版本百度云盘下载】

Div+CSS+jQuery布局精粹PDF格式电子书版下载

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

第1章 网页和网站的基础知识1

1.1 认识网页1

1.1.1 网页和网站1

1.1.2 网页类型2

1.1.3 网页的基本构成3

1.2 网页设计4

1.2.1 网页设计概述4

1.2.2 网页设计原则5

1.2.3 网页设计相关术语7

1.2.4 常见网页类型11

1.3 网页布局13

1.3.1 表格布局13

1.3.2 表格布局的特点14

1.3.3 冗余的嵌套表格和混乱的结构14

1.3.4 表格布局的优缺点15

1.3.5 Div+CSS布局15

1.3.6 Div+CSS布局的特点15

1.3.7 Div+CSS布局的优缺点15

1.4 网页版式设计16

1.4.1 网页版式设计的特点16

1.4.2 页面尺寸16

1.4.3 整体造型17

1.4.4 网页布局方法17

1.4.5 网页设计的构图方法17

1.4.6 版式设计的视觉流程18

1.5 了解Web标准19

1.5.1 Web标准的基础概念19

1.5.2 认识W3C19

1.5.3 W3C发布的标准19

1.5.4 网页标准化的好处21

1.6 网站开发流程22

1.7 专家支招22

1.7.1 确定域名注意事项22

1.7.2 常用网页编辑软件22

1.8 总结扩展23

1.8.1 本章小结23

1.8.2 举一反三——制作简单的HTML页面23

第2章 HTML、XHTML和HTML5基础25

2.1 HTML基础25

2.1.1 HTML概述25

2.1.2 HTML文件的基本结构26

2.1.3 HTML能做什么27

2.1.4 HTML的基本语法27

2.2 HTML标签28

2.2.1 基本标签28

2.2.2 格式标签29

2.2.3 文本标签30

2.2.4 超链接标签31

2.2.5 图像标签31

2.2.6 表格标签和表单标签32

2.2.7 分区标签32

2.3 HTML基础33

2.3.1 XHTML概述33

2.3.2 XHTML的页面结构33

2.3.3 XHTML代码规范34

2.3.4 3种不同的XHTML文档类型37

2.4 HTML和XHTML38

2.4.1 HTML和XHTML的区别38

2.4.2 使用XHTML的优点38

2.4.3 HTML转化成XHTML的方法38

实例：制作简单的HTML页面38

2.5 HTML 5基础40

2.5.1 HTML5概述40

2.5.2 HTML5的简化操作40

2.5.3 HTML5标签41

2.5.4 HTML5标准属性44

2.5.5 HTML5事件属性44

2.6 HTML5的设计目的46

2.6.1 ＜video＞标签46

实例：在网页中嵌入视频46

2.6.2 ＜audio＞标签48

实例：在网页中嵌入音频48

2.6.3 ＜canvas＞标签50

2.7 专家支招50

2.7.1 在＜body＞标签中如何设置网页的字体和大小50

2.7.2 网页中默认的超链接文字效果是什么样的50

2.8 总结扩展50

2.8.1 本章小结50

2.8.2 举一反三——在网页中实现绘图效果50

第3章 CSS样式基础52

3.1 CSS概述52

3.1.1 CSS的发展历史52

3.1.2 CSS的特点53

3.1.3 CSS样式的功能53

3.1.4 CSS样式的局限性54

3.2 CSS语法55

3.2.1 CSS的基本语法55

3.2.2 CSS规则56

3.3 CSS选择器56

3.3.1 通配选择器57

实例：太空冒险网页制作57

3.3.2 标签选择器58

3.3.3 类选择器59

实例：万圣节网页制作59

3.3.4 ID选择器61

3.3.5 群选择器62

3.3.6 派生选择器63

实例：运动鞋网页制作63

3.3.7 伪类选择器65

3.4 CSS 3中新增的选择器66

3.4.1 结构伪类选择器66

3.4.2 UI元素状态伪类选择器67

3.4.3 属性选择器67

3.5 在网页中应用CSS样式68

3.5.1 在HTML中插入样式表的方法68

3.5.2 内联样式68

3.5.3 嵌入样式表69

实例：为网页添加内部CSS样式69

3.5.4 链接外部样式71

实例：链接外部CSS样式文件71

3.5.5 导入样式74

3.6 CSS文档结构74

3.6.1 结构75

3.6.2 继承性75

3.6.3 特殊性76

3.6.4 层叠性77

3.6.5 重要性77

3.7 单位和值78

3.7.1 颜色值78

3.7.2 绝对单位79

3.7.3 相对单位80

3.8 专家支招80

3.8.1 CSS和HTML的区别80

3.8.2 导入CSS样式与链接CSS样式的区别80

3.9 总结扩展80

3.9.1 本章小结80

3.9.2 举一反三——在网页中实现绘图效果81

第4章 Div+CSS布局入门82

4.1 定义Div82

4.1.1 什么是Div82

4.1.2 插入Div83

4.1.3 Div的嵌套和固定格式84

4.2 可视化盒模型85

4.2.1 盒模型85

4.2.2 content（内容）87

4.2.3 padding（填充）87

实例：设置元素到元素的边界距离87

4.2.4 border（边框）89

实例：为图片添加边框89

4.2.5 margin（边界）90

实例：调整网页LOGO位置91

4.3 常见的布局方式92

4.3.1 居中布局设计92

4.3.2 浮动布局94

4.3.3 自适应高度98

4.4 CSS布局定位99

4.4.1 position属性99

4.4.2 相对定位100

实例：图像叠加100

4.4.3 绝对定位102

4.4.4 固定定位102

实例：制作固定不动的导航条102

4.4.5 浮动定位104

4.4.6 空白边叠加104

4.5 流体网格布局104

4.6 专家支招105

4.6.1 CSS3中有关盒模型的新增属性105

4.6.2 什么是id105

4.7 总结扩展105

4.7.1 本章小结106

4.7.2 举一反三——空白边叠加在网页中的应用106

第5章 使用CSS控制背景和图片107

5.1 背景控制概述107

5.1.1 背景控制原则107

5.1.2 背景控制属性108

5.2 背景颜色控制108

5.2.1 设置背景颜色108

5.2.2 设置块背景颜色109

5.3 背景图像控制110

5.3.1 设置背景图像110

实例：为网页设置背景图像110

5.3.2 背景图像的重复方式112

实例：设置背景图像的重复方式112

5.3.3 背景图像的定位114

5.3.4 背景图像的固定114

5.4 图片样式概述115

5.4.1 图像边框115

实例：为网页中的图片设置边框116

5.4.2 图片缩放117

5.4.3 图片水平对齐119

5.4.4 图片垂直对齐120

5.5 网页中的图文混排121

5.5.1 使用CSS样式实现文本环绕效果121

5.5.2 设置文本绕图间距122

5.6 专家支招123

5.6.1 网页中插入的图像可以不设置宽度和高度吗123

5.6.2 background-color属性可以使用哪些值123

5.7 总结扩展124

5.7.1 本章小结124

5.7.2 举一反三——网页图片垂直对齐124

第6章 CSS控制页面中的文本125

6.1 文本排版概述125

6.1.1 文本排版原则125

6.1.2 文本控制属性125

6.2 CSS文本样式126

6.2.1 字体126

6.2.2 大小127

6.2.3 颜色129

实例：为网页中的文字设置样式129

6.2.4 粗细132

6.2.5 样式133

6.2.6 英文字母大小写133

6.2.7 修饰133

实例：设置英文大小写并修饰文字134

6.3 CSS段落样式137

6.3.1 字间距137

6.3.2 行间距137

6.3.3 首字下沉138

6.3.4 首行缩进138

实例：为网页中段落文字设置不同样式138

6.3.5 段落水平对齐141

6.3.6 段落垂直对齐141

6.4 CSS样式的功能及冲突142

6.4.1 使用CSS对Flash中的文字进行控制142

6.4.2 CSS样式冲突142

6.5 专家支招143

6.5.1 CSS样式中的两端对齐有什么作用范围143

6.5.2 为什么有些情况应用的文本段落垂直对齐不起作用143

6.6 总结扩展143

6.6.1 本章小结143

6.6.2 举一反三——网页中文字水平居中对齐143

第7章 使用CSS样式控制列表145

7.1 列表控制概述145

7.2 列表样式控制146

7.2.1 无序列表146

7.2.2 有序列表146

7.2.3 自定义列表符号147

实例：制作网站列表147

7.2.4 定义列表149

7.2.5 更改列表项目样式150

7.3 使用列表制作菜单栏151

7.3.1 使用CSS样式创建横向导航菜单151

实例：制作游戏网站导航151

7.3.2 使用CSS样式创建竖向导航菜单152

实例：制作购物网站导航153

7.4 CSS3中新增的内容和不透明度属性154

7.4.1 内容（content）154

7.4.2 不透明度（opacity）155

实例：内容和不透明度属性的应用155

7.5 专家支招157

7.5.1 如何不通过CSS样式更改项目列表前的符号效果157

7.5.2 网页中文本分行与分段有什么区别157

7.6 总结扩展157

7.6.1 本章小结157

7.6.2 举一反三——更改部分项目列表符号158

第8章 使用CSS控制表格及表单样式159

8.1 表格及表单的设计概述159

8.1.1 表格的设计159

8.1.2 表单的设计及分类160

8.2 使用CSS控制表格样式163

8.2.1 表格标签与结构163

8.2.2 设置表格边框164

8.2.3 设置表格背景165

实例：设置表格边框及背景165

8.2.4 设置斑马式表格168

实例：设置斑马式表格168

8.2.5 设置交互式表格170

8.3 表单的设计171

8.3.1 表单171

8.3.2 表单元素172

8.4 表单输入172

8.4.1 文本域和密码域173

8.4.2 文件域和隐藏域174

8.4.3 单选按钮和复选框174

8.4.4 按钮和图像域176

8.4.5 菜单列表177

8.5 使用CSS样式控制表单元素178

8.5.1 使用CSS样式控制表单元素的背景178

实例：制作网站的登录页面178

8.5.2 使用CSS样式控制列表与跳转菜单182

8.5.3 使用CSS样式定义圆角文本字段183

8.6 表单在网页中的特殊应用185

8.6.1 聚焦型提示语消失185

实例：制作文字字段提示语效果185

8.6.2 输入型提示语消失189

8.7 专家支招190

8.7.1 为什么需要使用CSS对表格数据进行控制190

8.7.2 在表单域中插入图像域的作用190

8.8 总结扩展190

8.8.1 本章小结191

8.8.2 举一反三——美化登录框191

第9章 使用CSS控制超链接192

9.1 了解网页超链接192

9.1.1 超链接的定义192

9.1.2 超链接的对象193

9.1.3 超链接的路径194

9.1.4 合理安排超链接196

9.2 超链接的属性控制197

9.2.1 a：link197

9.2.2 a：active198

9.2.3 a：hover198

9.2.4 a：visited199

实例：制作网页文字超链接200

9.2.5 超链接的5种打开方式203

9.3 超链接特效203

9.3.1 按钮式超链接203

实例：制作按钮式超链接204

9.3.2 浮雕式超链接206

9.4 使用CSS实现鼠标特效207

9.5 超链接在网页中的特殊应用208

9.5.1 使用CSS实现倾斜导航菜单209

实例：制作网站的倾斜导航菜单209

9.5.2 使用CSS实现动感超链接211

9.6 专家支招213

9.6.1 实现动感导航菜单的原理213

9.6.2 如何识别网页中的超链接213

9.7 总结扩展214

9.7.1 本章小结214

9.7.2 举一反三——使用CSS控制鼠标箭头214

第10章 应用CSS3中的滤镜215

10.1 CSS3新增滤镜215

10.1.1 grayscale滤镜215

10.1.2 sepia滤镜217

实例：使用sepia滤镜217

10.1.3 opacity滤镜219

10.1.4 blur滤镜221

10.1.5 saturate滤镜222

实例：使用saturate滤镜222

10.1.6 hue-rotate滤镜224

10.1.7 invert滤镜226

实例：使用invert滤镜226

10.1.8 drop-shadow滤镜228

10.1.9 brightness滤镜229

10.1.10 contrast滤镜231

10.2 专家支招231

10.2.1 IE滤镜与W3C滤镜的区别231

10.2.2 IE滤镜包括哪些231

10.3 总结扩展232

10.3.1 本章小结232

10.3.2 举一反三——调整图像的对比度232

第11章 CSS3新增属性234

11.1 CSS3中新增的文字属性234

11.1.1 文字阴影text-shadow234

11.1.2 文字溢出处理text-overflow235

11.1.3 控制文本换行word-wrap237

实例：控制文本换行237

11.2 CSS 3中新增的背景属性239

11.2.1 背景图像大小background-size239

实例：控制背景图像大小239

11.2.2 背景位置定位background-origin241

11.2.3 背景图像裁剪区域background-clip242

11.3 CSS3中新增的边框属性244

11.3.1 图像边框border-image244

11.3.2 圆角边框border-radius245

11.3.3 多重边框颜色border-colors246

实例：为图像添加多种色彩边框246

11.4 CSS3中新增的多列布局属性248

11.4.1 列宽度248

11.4.2 新增多列设置属性249

实例：多列属性的设置250

11.5 CSS3中有关用户界面的新增属性252

11.5.1 box-sizing252

11.5.2 区域缩放调节resize253

11.5.3 轮廓外边框outline254

11.5.4 导航序列号nav-index254

11.6 CSS3中其他模块新增属性255

11.6.1 ＠media255

11.6.2 加载服务器端字体＠font-face256

11.6.3 阅读器speech257

11.7 专家支招258

11.7.1 除了Chrome浏览器外，还有哪些浏览器支持column属性258

11.7.2 目前常用的浏览器都是以什么为内核引擎258

11.8 总结扩展258

11.8.1 本章小结258

11.8.2 举一反三——为图片添加轮廓259

第12章 jQuery在网页中的应用260

12.1 认识JavaScript260

12.1.1 了解JavaScript260

12.1.2 JavaScript的特点261

12.1.3 CSS样式与JavaScfipt261

12.2 JavaScript与jQuery262

12.2.1 关于jQuery262

12.2.2 jQuery的安装262

12.2.3 jQuery语法263

12.2.4 jQuery选择器263

12.2.5 jQuery事件265

12.3 在Dreamweaver CC中使用jQuiery266

实例：制作一个简单的检索页面266

12.4 jQuery效果267

12.4.1 使用jQuery实现网页全屏大图切换效果268

实例：全屏大图切换效果268

12.4.2 使用jQuery实现图像横向滚动效果271

实例：图像横向滚动效果271

12.5 专家支招278

12.5.1 在Dreamweaver中为网页元素添加jQuery效果278

12.5.2 Dreamweaver中内置jQuery能够实现的效果278

12.6 总结扩展279

12.6.1 本章小结279

12.6.2 举一反三——使用jQuery制作选项卡279

第13章 jQuery Mobile与jQuery UI的应用280

13.1 认识jQuery Mobile280

13.1.1 jQuery Mobile的优点280

13.1.2 jQuery Mobile的操作流程281

13.2 使用Dreamweaver创建jQuery Mobile页面281

实例：设计制作手机网站页面282

13.3 iQuery Mobile事件288

13.3.1 触摸事件288

13.3.2 滚动事件289

13.3.3 方向事件289

13.3.4 页面事件290

13.4 jQuery UI291

13.4.1 jQuery UI的构成291

13.4.2 jQuery UI的特性291

13.4.3 jQuery UI的下载292

13.4.4 jQuery UI的使用292

实例：制作折叠式作品展示栏目294

13.5 专家支招298

13.5.1 在Dreamweaver CC中可以插入的jQueryMobile对象298

13.5.2 jQuery与jQuery UI的区别298

13.6 总结扩展298

13.6.1 本章小结298

13.6.2 举一反三——制作选项卡式新闻列表299

第14章 Div+CSS布局综合案例300

14.1 综合实例——制作音乐类网站300

实例：音乐类网站——顶部300

实例：音乐类网站——中部308

实例：音乐类网站——主体314

实例：音乐类网站——底部320

14.2 专家支招323

14.2.1 网页中文本字号的使用规范323

14.2.2 iframe标签的作用324

14.3 本章小结324