本书是一本面向Web前端开发学习者的入门图书，以项目驱动式的体例、通俗易懂的语言，详细讲解HTML5 + CSS3 + Bootstrap响应式Web开发技术。

本书共10章。第1～2章讲解HTML和CSS的基础知识；第3章讲解表格和表单；第4章讲解JavaScript与视频、音频；第5章讲解阶段项目—在线学习平台；第6章讲解Canvas绘图与CSS动画；第7章讲解移动Web屏幕适配；第8～9章讲解Bootstrap基础入门和组件应用；第10章讲解综合项目—在线鲜花商城。

1.黑马程序员应用系列教材改版；

2.本书配套丰富的教学资源，包括教学大纲、教学设计、源代码，习题等，而且为了帮助读者更好地学习本书中的内容，作者还提供了在线答疑。

黑马程序员是传智教育旗下高端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<br><br> 6．<select>、<optgroup>、<option><br><br> 标签80<br><br> 项目实现81<br><br> 本章小结83<br><br> 课后习题83<br><br> 第4章 JavaScript与视频、音频85<br><br> 项目4-1 视频播放器85<br><br> 项目需求85<br><br> 知识储备86<br><br> 1．JavaScript概述86<br><br> 2．JavaScript的引入方式86<br><br> 3．JavaScript常用的输入和输出语句87<br><br> 4．JavaScript注释87<br><br> 5．变量88<br><br> 6．数据类型89<br><br> 7．运算符89<br><br> 8．函数91<br><br> 9．分支结构92<br><br> 10．循环结构94<br><br> 11．DOM简介95<br><br> 12．获取元素95<br><br> 13．操作元素96<br><br> 14．事件97<br><br> 15．注册事件98<br><br> 16．Math对象98<br><br> 17．<video>标签100<br><br> 18．video对象100<br><br> 项目实现102<br><br> 项目4-2 音频播放器105<br><br> 项目需求105<br><br> 知识储备106<br><br> 1．<audio>标签106<br><br> 2．audio对象107<br><br> 项目实现107<br><br> 本章小结111<br><br> 课后习题111<br><br> 第5章 阶段项目——在线学习平台113<br><br> 任务5-1 项目开发准备113<br><br> 项目分析113<br><br> 项目目录结构114<br><br> 任务5-2 快捷导航模块115<br><br> 任务需求115<br><br> 任务实现115<br><br> 任务5-3 导航栏模块115<br><br> 任务需求115<br><br> 任务实现116<br><br> 任务5-4 侧边导航栏模块116<br><br> 任务需求116<br><br> 任务实现116<br><br> 任务5-5 轮播图模块116<br><br> 任务需求116<br><br> 任务实现116<br><br> 任务5-6 精品书籍推荐模块116<br><br> 任务需求116<br><br> 任务实现117<br><br> 任务5-7 版权声明模块117<br><br> 任务需求117<br><br> 任务实现117<br><br> 本章小结117<br><br> 第6章 Canvas绘图与CSS<br><br> 动画118<br><br> 项目6-1 水果销量饼图页面118<br><br> 项目需求118<br><br> 知识储备119<br><br> 1．认识画布119<br><br> 2．使用画布119<br><br> 3．绘制线条120<br><br> 4．线条的样式121<br><br> 5．路径122<br><br> 6．填充路径123<br><br> 7．绘制文本124<br><br> 8．绘制圆或弧线125<br><br> 项目实现125<br><br> 项目6-2 鲜花列表页面128<br><br> 项目需求128<br><br> 知识储备129<br><br> 1．过渡属性129<br><br> 2．二维变形130<br><br> 3．三维变形132<br><br> 项目实现134<br><br> 项目6-3 课程宣传页面138<br><br> 项目需求138<br><br> 知识储备139<br><br> 动画属性139<br><br> 项目实现142<br><br> 本章小结146<br><br> 课后习题146<br><br> 第7章 移动Web屏幕适配148<br><br> 项目7-1 线上问诊页面148<br><br> 项目需求148<br><br> 知识储备149<br><br> 1．屏幕分辨率和设备像素比149<br><br> 2．视口150<br><br> 3．媒体查询151<br><br> 4．二倍图154<br><br> 5．rem单位155<br><br> 6．rem适配方案156<br><br> 7．Less158<br><br> 项目实现162<br><br> 项目7-2 音乐屋首页页面165<br><br> 项目需求165<br><br> 知识储备166<br><br> 1．流式布局166<br><br> 2．vw单位和vh单位167<br><br> 项目实现168<br><br> 本章小结173<br><br> 课后习题174<br><br> 第8章 Bootstrap基础入门175<br><br> 项目8-1 需求定制列表页面175<br><br> 项目需求175<br><br> 知识储备176<br><br> 1．Bootstrap概述176<br><br> 2．Bootstrap的特点176<br><br> 3．Bootstrap的组成177<br><br> 4．Bootstrap的下载和引入177<br><br> 5．Bootstrap布局容器181<br><br> 6．Bootstrap栅格系统182<br><br> 7．Bootstrap工具类184<br><br> 项目实现186<br><br> 项目8-2 用户注册页面189<br><br> 项目需求189<br><br> 知识储备190<br><br> 1．表单控件样式类190<br><br> 2．表单布局方式192<br><br> 3．文本格式类194<br><br> 4．文本颜色类194<br><br> 5．背景颜色类195<br><br> 6．边框样式类196<br><br> 项目实现197<br><br> 本章小结200<br><br> 课后习题200<br><br> 第9章 Bootstrap组件应用202<br><br> 项目9-1 轮播图页面202<br><br> 项目需求202<br><br> 知识储备203<br><br> 1．什么是组件203<br><br> 2．Bootstrap组件的基本使用方法204<br><br> 3．轮播组件205<br><br> 4．定位样式类207<br><br> 项目实现208<br><br> 项目9-2 课程介绍页面210<br><br> 项目需求210<br><br> 知识储备211<br><br> 1．浮动样式类211<br><br> 2．图像样式类211<br><br> 3．阴影样式类212<br><br> 4．Bootstrap Icons图标库213<br><br> 5．列表样式类215<br><br> 6．卡片组件216<br><br> 7．按钮组件218<br><br> 项目实现220<br><br> 项目9-3 下拉菜单导航栏页面223<br><br> 项目需求223<br><br> 知识储备224<br><br> 1．导航栏组件224<br><br> 2．下拉菜单组件227<br><br> 项目实现230<br><br> <br><br> 本章小结232<br><br> 课后习题233<br><br> 第 10章 综合项目——在线鲜花<br><br> 商城235<br><br> 任务10-1 项目开发准备235<br><br> 项目分析235<br><br> 项目初始化237<br><br> 任务10-2 快捷导航模块238<br><br> 任务需求238<br><br> 任务实现238<br><br> 任务10-3 导航栏模块239<br><br> 任务需求239<br><br> 任务实现239<br><br> 任务10-4 轮播图模块239<br><br> 任务需求239<br><br> 任务实现240<br><br> 任务10-5 服务模块240<br><br> 任务需求240<br><br> 任务实现241<br><br> 任务10-6 鲜花推荐模块241<br><br> 任务需求241<br><br> 任务实现242<br><br> 任务10-7 送长辈鲜花模块242<br><br> 任务需求242<br><br> 任务实现243<br><br> 任务10-8 晒单评价模块244<br><br> 任务需求244<br><br> 任务实现245<br><br> 任务10-9 服务条款模块245<br><br> 任务需求245<br><br> 任务实现246<br><br> 任务10-10 版权声明模块246<br><br> 任务需求246<br><br> 任务实现246<br><br> 本章小结246 </div> </div> <div class="clear"></div> <script type="text/javascript"> function tab(a,b,c) { for(i=1;i<=b;i++){ if(c==i) { // 判断选择模块 document.getElementById(a+"_mo_"+i).style.display = "block"; // 显示模块内容 document.getElementById(a+"_to_"+i).className = "no"; // 改变菜单为选中样式 } else{ // 没有选择的模块 document.getElementById(a+"_mo_"+i).style.display = "none"; // 隐藏没有选择的模块 document.getElementById(a+"_to_"+i).className = "q"; // 清空没有选择的菜单样式 } } } </script> <div class="b-comment"> <div class="mt"> <span> 你还可能感兴趣</span> </div> </div> <div class="d-comment"> <ul> <li><a href="bookshow.asp?id=1947336" target="_blank"><img src="/uploadfile/202010/9787115534859.jpg" alt="网页设计与制作（HTML5+CSS3+JavaScript）（第4版）（微课版）" name="Pic" onerror="showImgDelay(this,'/uploadfile/202010/9787115534859.jpg',2);" width="148" height="148"></a><br><a href="bookshow.asp?id=1947336" title="网页设计与制作（HTML5+CSS3+JavaScript）（第4版）（微课版）" target="_blank">网页设计与制作（HTML5+CSS3+JavaScript）（第4版）（微课版）</a></li><li><a href="bookshow.asp?id=2658539" target="_blank"><img src="/uploadfile/202407/9787568943116.jpg" alt="Web前端开发案例实战教程" name="Pic" onerror="showImgDelay(this,'/uploadfile/202407/9787568943116.jpg',2);" width="148" height="148"></a><br><a href="bookshow.asp?id=2658539" title="Web前端开发案例实战教程" target="_blank">Web前端开发案例实战教程</a></li><li><a href="bookshow.asp?id=1118227" target="_blank"><img src="/uploadfile/images1807/9787115427908.jpg" alt="Dreamweaver CS6网页设计与制作标准教程 微课版" name="Pic" onerror="showImgDelay(this,'/uploadfile/images1807/9787115427908.jpg',2);" width="148" height="148"></a><br><a href="bookshow.asp?id=1118227" title="Dreamweaver CS6网页设计与制作标准教程 微课版" target="_blank">Dreamweaver CS6网页设计与制作标准教程 微课版</a></li><li><a href="bookshow.asp?id=1924002" target="_blank"><img src="/uploadfile/202009/9787519806811.jpg" alt="基于Python的Google App Engine编程" name="Pic" onerror="showImgDelay(this,'/uploadfile/202009/9787519806811.jpg',2);" width="148" height="148"></a><br><a href="bookshow.asp?id=1924002" title="基于Python的Google App Engine编程" target="_blank">基于Python的Google App Engine编程</a></li><li><a href="bookshow.asp?id=1243989" target="_blank"><img src="/uploadfile/Download/20180205170639683968.jpg" alt="网页设计与制作——Dreamweaver+Flash+Photoshop+HTML5+CSS3（慕课版）" name="Pic" onerror="showImgDelay(this,'/uploadfile/Download/20180205170639683968.jpg',2);" width="148" height="148"></a><br><a href="bookshow.asp?id=1243989" title="网页设计与制作——Dreamweaver+Flash+Photoshop+HTML5+CSS3（慕课版）" target="_blank">网页设计与制作——Dreamweaver+Flash+Photoshop+HTML5+CSS3（慕课版）</a></li> </ul> </div> <div class="b-comment"> <div class="mt"> <span> 我要评论</span> </div> </div> <div class="c-comment"> <form method="post" name="comment" action="/book_comment.asp"> <table border="0" cellspacing="1" cellpadding="3" class="commentlist"> <input name=id type=hidden value="2917492"> <input name=title type=hidden value=" 响应式Web开发项目教程"> <tr> <th>您的姓名</th> <td><input type="text" name="name" size="20" maxlength="20" class="form" />  验证码：<input name="verifycode" type="text" size="7" style=" height:18px;" /> <img src="safecode.asp?" onClick="this.src+=Math.random()" alt="图片看不清？点击重新得到验证码" style="cursor:hand;" height="18" /></td> </tr> <tr> <th>留言内容</th> <td><textarea name="content" id="content" cols="46" rows="3" class="form-textarea" wrap=physical onKeyDown="checkMaxInput(this.form)" onKeyUp="checkMaxInput(this.form)" style="overflow:auto">