响应式Web开发项目教程（HTML5+CSS3+Bootstrap）（第3版）

本书是一本面向Web前端开发学习者的入门图书，以项目驱动式的体例、通俗易懂的语言，详细讲解HTML5 + CSS3 + Bootstrap响应式Web开发技术。 本书共10章。第1～2章讲解HTML和CSS的基础知识；第3章讲解表格和表单；第4章讲解JavaScript与视频、音频；第5章讲解阶段项目—在线学习平台；第6章讲解Canvas绘图与CSS动画；第7章讲解移动Web屏幕适配；第8～9章讲解Bootstrap基础入门和组件应用；第10章讲解综合项目—在线鲜花商城。

黑马程序员是传智教育旗下高端IT教育品牌，传智教育是国内首个实现A股IPO的教育企业。依托于传智雄厚的教育资源，秉承传智教育“为中华民族伟大复兴而讲课，为千万学生少走弯路而著书”的使命，致力于培养高精尖数字化人才，为国家建设现代化经济体系的战略目标培养科技人才。 黑马程序员课程涵盖了JavaEE、鸿蒙应用开发、HTML&JS+前端、Python大数据开发、人工智能、电商视觉设计、软件测试、新媒体、产品经理等热门精品学科。已在北京昌平、北京顺义、上海、广州、深圳、武汉、郑州、西安、长沙、济南、重庆、南京、杭州、石家庄、成都、合肥、太原16个城市设立17所分校。

第 1章 HTML页面结构构建 1 项目1-1 个人简介页面 2 项目需求 2 知识储备 2 1．HTML概述 2 2．浏览器 2 3．Visual Studio Code编辑器 3 4．标签概述 8 5．页面格式化标签 9 6．文本格式化标签 10 7．图像标签 11 8．HTML实体 12 项目实现 13 项目1-2 新闻页面 14 项目需求 14 知识储备 14 1．列表 14 2．列表嵌套 17 3．超链接 17 4．容器标签 18 5．元素 18 项目实现 19 本章小结 20 课后习题 20 第 2章 CSS页面样式美化 22 项目2-1 文章详情页面 23 项目需求 23 知识储备 23 1．CSS概述 23 2．CSS样式规则 24 3．CSS的引入方式 24 4．基础选择器 25 5．字体属性 25 6．字体图标 27 7．文本外观属性 32 8．CSS注释 34 项目实现 34 项目2-2 下拉菜单页面 36 项目需求 36 知识储备 36 1．复合选择器 36 2．伪类选择器 38 3．伪元素选择器 39 4．CSS的三大特性 40 5．列表样式属性 42 6．CSS标准盒模型 43 7．边框属性 44 8．内边距属性 47 9．外边距属性 48 10．盒子的宽度和高度 48 11．box-sizing属性 49 12．display属性 49 项目实现 49 项目2-3 商城首页 51 项目需求 51 知识储备 51 1．背景属性 51 2．渐变 53 3．object-fit属性 55 4．浮动布局 55 5．清除浮动 56 6．语义化标签 60 7．弹性盒布局 60 8．元素的定位 63 9．层叠等级属性 65 10．阴影属性 65 项目实现 66 本章小结 68 课后习题 68 第3章 表格和表单 70 项目3-1 图书列表页面 70 项目需求 70 知识储备 71 1．表格标签 71 2．CSS控制表格样式 72 3．表格标签属性 73 项目实现 74 项目3-2 安全教育活动调查问卷页面 75 项目需求 75 知识储备 76 1．表单标签 76 2．

标签 77 3．标签 77 4．标签 78 5．标签 79 6．<select>、<optgroup>、<option> 标签 80 项目实现 81 本章小结 83 课后习题 83 第4章 JavaScript与视频、音频 85 项目4-1 视频播放器 85 项目需求 85 知识储备 86 1．JavaScript概述 86 2．JavaScript的引入方式 86 3．JavaScript常用的输入和输出语句 87 4．JavaScript注释 87 5．变量 88 6．数据类型 89 7．运算符 89 8．函数 91 9．分支结构 92 10．循环结构 94 11．DOM简介 95 12．获取元素 95 13．操作元素 96 14．事件 97 15．注册事件 98 16．Math对象 98 17．<video>标签 100 18．video对象 100 项目实现 102 项目4-2 音频播放器 105 项目需求 105 知识储备 106 1．<audio>标签 106 2．audio对象 107 项目实现 107 本章小结 111 课后习题 111 第5章 阶段项目——在线学习平台 113 任务5-1 项目开发准备 113 项目分析 113 项目目录结构 114 任务5-2 快捷导航模块 115 任务需求 115 任务实现 115 任务5-3 导航栏模块 115 任务需求 115 任务实现 116 任务5-4 侧边导航栏模块 116 任务需求 116 任务实现 116 任务5-5 轮播图模块 116 任务需求 116 任务实现 116 任务5-6 精品书籍推荐模块 116 任务需求 116 任务实现 117 任务5-7 版权声明模块 117 任务需求 117 任务实现 117 本章小结 117 第6章 Canvas绘图与CSS 动画 118 项目6-1 水果销量饼图页面 118 项目需求 118 知识储备 119 1．认识画布 119 2．使用画布 119 3．绘制线条 120 4．线条的样式 121 5．路径 122 6．填充路径 123 7．绘制文本 124 8．绘制圆或弧线 125 项目实现 125 项目6-2 鲜花列表页面 128 项目需求 128 知识储备 129 1．过渡属性 129 2．二维变形 130 3．三维变形 132 项目实现 134 项目6-3 课程宣传页面 138 项目需求 138 知识储备 139 动画属性 139 项目实现 142 本章小结 146 课后习题 146 第7章 移动Web屏幕适配 148 项目7-1 线上问诊页面 148 项目需求 148 知识储备 149 1．屏幕分辨率和设备像素比 149 2．视口 150 3．媒体查询 151 4．二倍图 154 5．rem单位 155 6．rem适配方案 156 7．Less 158 项目实现 162 项目7-2 音乐屋首页页面 165 项目需求 165 知识储备 166 1．流式布局 166 2．vw单位和vh单位 167 项目实现 168 本章小结 173 课后习题 174 第8章 Bootstrap基础入门 175 项目8-1 需求定制列表页面 175 项目需求 175 知识储备 176 1．Bootstrap概述 176 2．Bootstrap的特点 176 3．Bootstrap的组成 177 4．Bootstrap的下载和引入 177 5．Bootstrap布局容器 181 6．Bootstrap栅格系统 182 7．Bootstrap工具类 184 项目实现 186 项目8-2 用户注册页面 189 项目需求 189 知识储备 190 1．表单控件样式类 190 2．表单布局方式 192 3．文本格式类 194 4．文本颜色类 194 5．背景颜色类 195 6．边框样式类 196 项目实现 197 本章小结 200 课后习题 200 第9章 Bootstrap组件应用 202 项目9-1 轮播图页面 202 项目需求 202 知识储备 203 1．什么是组件 203 2．Bootstrap组件的基本使用方法 204 3．轮播组件 205 4．定位样式类 207 项目实现 208 项目9-2 课程介绍页面 210 项目需求 210 知识储备 211 1．浮动样式类 211 2．图像样式类 211 3．阴影样式类 212 4．Bootstrap Icons图标库 213 5．列表样式类 215 6．卡片组件 216 7．按钮组件 218 项目实现 220 项目9-3 下拉菜单导航栏页面 223 项目需求 223 知识储备 224 1．导航栏组件 224 2．下拉菜单组件 227 项目实现 230 本章小结 232 课后习题 233 第 10章 综合项目——在线鲜花 商城 235 任务10-1 项目开发准备 235 项目分析 235 项目初始化 237 任务10-2 快捷导航模块 238 任务需求 238 任务实现 238 任务10-3 导航栏模块 239 任务需求 239 任务实现 239 任务10-4 轮播图模块 239 任务需求 239 任务实现 240 任务10-5 服务模块 240 任务需求 240 任务实现 241 任务10-6 鲜花推荐模块 241 任务需求 241 任务实现 242 任务10-7 送长辈鲜花模块 242 任务需求 242 任务实现 243 任务10-8 晒单评价模块 244 任务需求 244 任务实现 245 任务10-9 服务条款模块 245 任务需求 245 任务实现 246 任务10-10 版权声明模块 246 任务需求 246 任务实现 246 本章小结 246</div></div> </div> </div> </div> </div> </div> <script src="/static/js/lib/jquery/blowup.min.js" type="text/javascript"></script> <script type="application/javascript"> $(document).ready(function () { /** * 图片放大器 */ $("#img_zoom").blowup({ background : "#FCEBB6" }); }); </script> <!-- 添加到书单弹出框 --> <div class="modal fade bs-example-modal-lg" id="modal_add_to_list" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">添加到书单</h4> </div> <div class="modal-body"> <!-- 书单列表模板 --> <script id="tpl_my_list" type="text/template"> {@each records as i} <li class="list-group-item"> <label style="width:100%;cursor: pointer;"> <input type="radio" name="listId" value="@{i.id}" id="list@{i.id}"> @{i.name} </label> </li> {@/each} </script> <!-- 书单列表模板结束 --> <ul class="list-group" id="tbl_my_list"> <li class="list-group-item"> <label for="list2" >加载中...</label> </li> </ul> <div class="pager"></div> <a href="javascript:void(0);" id="a_add_list">点此新建书单</a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="btn_add_to_list_save">确定</button> </div> </div> </div> </div> <!-- 添加到书单弹出框结束 --> <!-- 新建书单弹出框 --> <div class="modal fade bs-example-modal-lg" id="modal_add_list" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form id="form_create_list"> <button type="reset" style="display:none;"></button> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">新建书单</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="recipient-name" class="control-label">标题：</label> <input type="text" class="form-control" name="name"> </div> <div class="form-group"> <label for="recipient-name" class="control-label">简介：</label> <textarea style="height:200px" class="form-control" name="memo" placeholder="书单描述...">