随着浏览器性能的不断提升,越来越多的应用从C端(客户端)转入了B端(浏览器端),浏览器Web应用开发需求越来越多,逐渐形成了一个围绕浏览器的完整生态。《Web前端开发实战》通过Web应用开发入门实例,利用HTML5、CSS3系统讲解了Web前端开发中的基础理论知识及项目开发方案。 《Web前端开发实战》共分为13章,内容包括前端开发简介、网页排版实战、表格案例实战、表单案例实战、CSS布局——个人简历制作、个性化的CSS、定位布局、弹性盒子布局、网格布局、响应式布局、移动端布局、长页面布局、响应式布局。 《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