WEB前端开发实战

第1章 前端开发简介 1
1.1 前端开发的前世今生 1
1.1.1 什么是前端开发 1
1.1.2 前端开发的发展历程 2
1.2 前端开发工具介绍 2
1.2.1 Visual Studio Code 3
1.2.2 WebStorm 3
1.2.3 HBuilder X 4
1.2.4 Sublime Text 4
1.2.5 前端开发工具的安装 5
1.3 前端开发技术介绍 8
1.3.1 HTML 8
1.3.2 CSS 9
1.3.3 JavaScript 10
1.3.4 前端框架简介 12
1.4 本章练习 12
第2章 网页排版实战 13
2.1 HTML文档的基本结构 13
2.2 HTML标签语法 14
2.2.1 标签类型 14
2.2.2 标签属性 15
2.3 HTML常用标签 16
2.3.1 标题标签 16
2.3.2 段落标签 17
2.3.3 文本格式化标签 17
2.3.4 列表标签 18
2.3.5 图片标签 22
2.3.6 超链接标签 24
2.3.7 注释标签 26
2.3.8 换行标签 26
2.3.9 水平线标签 27
2.3.10 和标签 27
2.4 标签实战 28
2.4.1 项目分析 28
2.4.2 项目开发 28
2.5 本章练习 32
第3章 表格案例实战 33
3.1 表格元素 33
3.1.1 简单的表格 33
3.1.2 表格标题 35
3.1.3 表格三元素 35
3.2 表格属性 38
3.2.1 表格边框 38
3.2.2 表格间距 40
3.2.3 表格跨列 42
3.2.4 表格跨行 43
3.3 表格实战 45
3.4 本章练习 54
第4章 表单案例实战 55
4.1 表单标签 55
4.1.1 表单标签简介 55
4.1.2 表单标签的常用属性 56
4.2 input标签 57
4.2.1 input标签的使用 58
4.2.2 input标签的常用属性 58
4.3 选择框 61
4.3.1 单选框 61
4.3.2 复选框 62
4.3.3 下拉选择框 62
4.4 多行文本域 63
4.4.1 多行文本标签 63
4.4.2 多行文本域的属性 64
4.5 表单排版实战 64
4.5.1 项目分析 64
4.5.2 项目开发 64
4.6 本章练习 68
第5章 CSS布局之个人简历制作 69
5.1 基础选择器 69
5.1.1 CSS使用方式 69
5.1.2 标签选择器 72
5.1.3 类选择器 73
5.1.4 id选择器 74
5.2 文本属性 75
5.2.1 文本颜色 75
5.2.2 文本居中 76
5.2.3 文本缩进 77
5.2.4 文本修饰 78
5.3 文字属性 78
5.3.1 字体家族 78
5.3.2 文字大小 79
5.3.3 文字加粗 80
5.3.4 文字倾斜 82
5.3.5 文字行高 83
5.4 CSS项目布局实战 84
5.4.1 项目分析 84
5.4.2 项目开发 84
5.5 本章练习 90
第6章 个性化的CSS样式 91
6.1 CSS层级选择器 91
6.1.1 子代选择器 91
6.1.2 后代选择器 92
6.1.3 相邻兄弟选择器 93
6.1.4 通用兄弟选择器 94
6.2 伪类选择器 96
6.2.1 什么是伪类 96
6.2.2 简单伪类示例 96
6.2.3 常用伪类 97
6.3 伪元素选择器 102
6.3.1 什么是伪元素 103
6.3.2 简单的伪元素示例 103
6.3.3 常用伪元素 103
6.4 CSS边框 105
6.4.1 边框样式 106
6.4.2 边框宽度 109
6.4.3 边框颜色 109
6.4.4 边框综合属性 110
6.4.5 圆角属性 112
6.4.6 边框阴影 114
6.5 CSS背景 116
6.5.1 背景颜色 116
6.5.2 背景图像 116
6.5.3 背景图像重复 117
6.5.4 背景图像定位 118
6.5.5 背景图像尺寸 121
6.5.6 背景图像固定 122
6.5.7 背景裁剪 124
6.5.8 背景综合属性 125
6.5.9 多背景图像 125
6.6 CSS外边距 126
6.6.1 外边距简写属性 126
6.6.2 单边外边距 127
6.6.3 margin的应用 128
6.7 CSS内边距 130
6.7.1 内边距简写属性 131
6.7.2 单边内边距 132
6.7.3 padding的应用 132
6.8 CSS样式实战 134
6.8.1 多彩的边框 134
6.8.2 不同主题的按钮 136
6.9 本章练习 138
第7章 定位布局 139
7.1 定位概述 140
7.1.1 CSS中的定位方式 140
7.1.2 指定元素位置 140
7.2 相对定位 141
7.3 绝对定位 142
7.3.1 相对于*近已定位祖先
元素 142
7.3.2 相对于页面的左上角定位 143
7.4 固定定位 144
7.5 元素的堆叠次序 145
7.6 案例演示 148
7.6.1 遮罩层效果 148
7.6.2 使用定位实现圣杯布局
效果 151
7.7 本章练习 152
第8章 弹性盒子布局方案 153
8.1 弹性盒子介绍 153
8.1.1 flex布局介绍 153
8.1.2 flex基本概念 154
8.2 弹性盒子属性 154
8.2.1 flex-direction属性 154
8.2.2 justify-content属性 156
8.2.3 align-items属性 158
8.2.4 flex-wrap属性 160
8.2.5 flex-flow属性 162
8.2.6 align-content属性 163
8.3 flex项目属性 165
8.3.1 flex-grow属性 166
8.3.2 flex-shrink属性 167
8.3.3 flex-basis属性 168
8.3.4 flex属性 169
8.3.5 order属性 170
8.3.6 align-self属性 171
8.4 城市旅游移动端首页开发
实战 172
8.5 本章练习 186
第9章 网格布局 187
9.1 网格grid基础 187
9.1.1 display: grid定义网格布局 187
9.1.2 grid宽与高的设置 189
9.1.3 子元素在容器中的排列
位置 191
9.2 网格grid属性 193
9.2.1 网格行、网格列 194
9.2.2 网格间距 197
9.2.3 网格线 199
9.2.4 网格区域 199
9.3 项目实战 200
9.4 本章练习 207
第10章 响应式布局 209
10.1 响应式Web基础 209
10.2 媒体查询 210
10.2.1 视口 210
10.2.2 媒体查询属性语法 210
10.2.3 媒体查询注意事项 211
10.3 项目实战 211
10.4 本章练习 242
第11章 移动端布局 243
11.1 移动端开发简介 243
11.1.1 移动端开发的相关
知识点 243
11.1.2 视口 244
11.2 移动端适配方案 245
11.2.1 rem布局的适配方法 245
11.2.2 vw和vh适配方法 246
11.3 移动端布局项目实战——
鲜花养护项目 247
11.3.1 项目分析 247
11.3.2 项目开发 248
11.4 本章练习 264
第12章 长页面布局实战 265
12.1 UI效果图 265
12.2 项目搭建 267
12.3 顶部导航 268
12.4 轮播模块 270
12.5 关于我们 272
12.6 产品中心 275
12.7 新闻中心1 278
12.8 新闻中心2 282
12.9 合作伙伴 285
12.10 联系我们 288
12.11 尾部链接 293
第13章 响应式布局综合实战 297
13.1 项目概述 297
13.1.1 项目分析 297
13.1.2 创建项目目录 298
13.1.3 添加样式重置的代码 298
13.2 项目开发 299
13.2.1 头部导航和logo部分 299
13.2.2 banner图模块 302
13.2.3 热门旅游模块 304
13.2.4 底部菜单效果 309
13.2.5 版权部分 312
13.3 本章练习 314
参考文献 315