案例学WEB前端开发：HTML5+CSS3+JavaScript+手机响应式开发（全彩版）

定　价：¥49.80

作　者：	明日科技
出版社：	吉林大学出版社
丛编项：
标　签：	暂缺

购买这本书可以去

ISBN：	9787569225815	出版时间：	2018-07-01	包装：	平装
开本：	16开	页数：	288页	字数：

内容简介

　　《案例学Web 前端开发》从初学者角度出发，通过44 个实用的Web 前端应用，循序渐进地讲解一个完整网站的功能实现及开发过程。全书共分12 章，包括Web 网站初体验、搭建网站雏形、用CSS3 装饰你的网站、HTML5 多媒体实现网站“家庭影院”、通过HTML5 表单与用户交互、列表与表格——让网站更规整、CSS3 布局与动画、JavaScript 基础应用、JavaScript 事件处理、手机响应式开发、综合案例——明日学院官网等。书中所有知识点都围绕着案例进行，涉及的代码给出了详细的解释，可以使初学者能够轻松地领会代码的功能，快速学习Web 前端知识。本书中44 个前端应用可以帮助读者更好地学习Web 前端知识；附赠的光盘中给出视频讲解、实例及项目源码等，方便读者学习；书中设置了50 余个二维码，扫描二维码观看视频讲解，解决学习疑难。此外，登录明日学院网站（www.mingrisoft.com）还可以获得更多学习资源和技术支持。

作者简介

　　明日科技，是一家专业从事软件开发、教育培训以及软件开发教育资源整合的高科技公司，其编写的教材既注重选取软件开发中的必需、常用内容，又注重内容的易学、方便以及相关知识的拓展，深受读者喜爱。其编写的图书主要有“从入门到精通”“软件开发视频大讲堂”“软件开发实战1200例”“软件工程师开发大系”“零基础学”“项目开发实战入门”“精彩编程200例”等多个系列。多次荣获“全行业优xiu畅销品种”“中国大学出版社优xiu畅销书”等奖项，多个品种长期位居同类图书销售排行榜的前列。

图书目录

1 Web 网站初体验

1.1 揭秘Web前端

Web是什么？

网页核心技术

1.HTML5概述

2.CSS3简介

3.JavaScript简介

1.2 大白老师带你走进HTML5

标签、元素、结构概述

1.HTML5标签6

2.元素

3.HTML5文件结构

HTML 5的基本标签

1.文件开始标签

2.文件头部标签

3.文件标题标签</p> <p>4.元信息标签<meta></p> <p>5.页面的主体标签<body>8</p> <p>6.页面的注释</p> <p>1.3 用WebStorm写下你的第一行HTML5代码</p> <p>下载和安装</p> <p>创建HTML5工程和文件，运行HTML5程序</p> <p>大白的任务：网页字符画 —— 史努比</p> <p>2 搭建网站雏形</p> <p>案例1：制作第一个H5案例—— 明日学院简介</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.<p>段落标签</p> <p>2.<img>图片标签</p> <p>案例实现</p> <p>案例2：多图展示合作伙伴</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.<hr>水平线标签</p> <p>2.<br />换行标签</p> <p>案例实现</p> <p>案例3：通过外链实现友情链接</p> <p>案例描述</p> <p>知识点讲解</p> <p><a>链接标签</p> <p>案例实现</p> <p>案例4：分组标签制作联系方式</p> <p>案例描述</p> <p>知识点讲解</p> <p><div>和<span>分组标签</p> <p>案例实现</p> <p>大白的任务：图文结合展示商品</p> <p>3 用CSS3 装饰你的网站</p> <p>案例1：图文混排展示课程信息</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.CSS3的发展史</p> <p>2.选择器</p> <p>3.类选择器</p> <p>4.ID选择器</p> <p>案例实现</p> <p>案例2：时间轴方式的直播预告</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.HTML列表标签</p> <p>2.CSS列表属性</p> <p>案例实现</p> <p>案例3：美化学习兴趣分类界面</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.链接<a>标签的CSS属性</p> <p>2.文本相关的CSS属性1</p> <p>案例实现</p> <p>案例4：打造多彩网站主题背景</p> <p>案例描述</p> <p>知识点讲解</p> <p>与背景相关的CSS属性</p> <p>案例实现</p> <p>大白的任务：商品分类展示（CSS版）</p> <p>4 HTML5 多媒体实现网站“家庭影院”</p> <p>案例1：网页中的H5视频播放器</p> <p>案例描述</p> <p>知识点讲解</p> <p><video>标签</p> <p>案例实现</p> <p>案例2：动态文字弹幕</p> <p>案例描述</p> <p>知识点讲解</p> <p><marquee>标签</p> <p>案例实现</p> <p>案例3：神奇的在线听书功能案例描述</p> <p>知识点讲解</p> <p><audio>标签</p> <p>案例实现</p> <p>案例4：定制你的视频播放器</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.多媒体标签的事件处理</p> <p>2.多媒体标签的常见事件</p> <p>案例实现</p> <p>大白的任务：DIY音乐播放器</p> <p>5 通过HTML5 表单与用户交互</p> <p>案例1：表单实现用户注册页面</p> <p>案例描述</p> <p>知识点讲解</p> <p><form>表单标签</p> <p>案例实现</p> <p>案例2：申请个人讲师</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.<input>标签</p> <p>2.单选框和复选框</p> <p>案例实现</p> <p>案例3：智能机器人</p> <p>案例描述</p> <p>知识点讲解</p> <p><textarea>文本域标签</p> <p>案例实现</p> <p>案例4：带附件的用户反馈</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.图像域</p> <p>2.文件域</p> <p>案例实现</p> <p>大白的任务：设计个人信息表单8</p> <p>6 列表与表格——让网站更规整</p> <p>案例1：图文结合显示课程列表</p> <p>案例描述</p> <p>知识点讲解</p> <p>定义列表</p> <p>案例实现</p> <p>案例2：网站必备的导航菜单</p> <p>案例描述4</p> <p>知识点讲解</p> <p>无序列表</p> <p>案例实现</p> <p>案例3：有序列表让招聘信息更清晰</p> <p>案例描述6</p> <p>知识点讲解</p> <p>有序列表</p> <p>案例实现</p> <p>案例4：表格也可以设计漂亮的订单页面</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.简单表格</p> <p>2.表格的合并</p> <p>案例实现</p> <p>大白的任务：商品分类展示（表格版）</p> <p>7 CSS3 布局与动画</p> <p>案例1：使用表格布局课程列表</p> <p>案例描述</p> <p>知识点讲解</p> <p>表格布局</p> <p>案例实现</p> <p>案例2：布局积分兑奖页面</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.display 属性</p> <p>2.f loat 属性</p> <p>案例实现</p> <p>案例3：鼠标经过时的图片动画</p> <p>案例描述</p> <p>知识点讲解</p> <p>变换（transform）</p> <p>案例实现</p> <p>案例4：给导航菜单增加动画特效</p> <p>案例描述</p> <p>知识点讲解</p> <p>过渡（transition）</p> <p>案例实现</p> <p>大白的任务：商品的文字动效广告</p> <p>8 JavaScript 基础应用</p> <p>案例1：给你的课程分分类</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.标识符</p> <p>2.关键字</p> <p>3.常量</p> <p>4.变量</p> <p>5.函数</p> <p>案例实现</p> <p>案例2：个性化的智能搜索0</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.if语句</p> <p>2.for循环</p> <p>案例实现</p> <p>案例3：轮播图广告</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.认识 jQuery 框架</p> <p>2.使用 jQuery 框架</p> <p>案例实现</p> <p>案例4：让用户为你建言献策</p> <p>案例描述</p> <p>知识点讲解</p> <p>文档对象（Document）</p> <p>案例实现</p> <p>大白的任务：网页版日历</p> <p>9 JavaScript 事件处理</p> <p>案例1：你的手机号中奖了吗</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.事件处理程序在JavaScript中的调用</p> <p>2.事件处理程序在HTML中的调用</p> <p>案例实现</p> <p>案例2：限时大抢购</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.事件流</p> <p>2.主流浏览器的事件模型</p> <p>3.事件对象</p> <p>案例实现</p> <p>案例3：网页刮刮卡</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.鼠标的单击事件</p> <p>2.鼠标的按下或松开事件</p> <p>3.鼠标的移入移出事件</p> <p>4.鼠标的移动事件</p> <p>案例实现</p> <p>案例4：模拟12306图片验证码</p> <p>案例描述</p> <p>知识点讲解</p> <p>注册与移除事件监听器8</p> <p>案例实现</p> <p>大白的任务：布局用户登录页</p> <p>10 手机响应式开发（上）</p> <p>案例1：手机端展示课程列表</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.Flex布局</p> <p>2.Flex容器常见属性</p> <p>案例实现</p> <p>案例2：手机端这样做用户登录</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.媒体查询</p> <p>2.使用媒体查询的步骤</p> <p>案例实现</p> <p>案例3：移动端在线客服</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.常用布局类型</p> <p>2.布局的实现方式</p> <p>案例实现6</p> <p>案例4：5分钟让你学会在手机端播放视频</p> <p>案例描述</p> <p>知识点讲解</p> <p><meta>标签</p> <p>案例实现</p> <p>大白的任务：《王者荣耀》手机端官网</p> <p>11 手机响应式开发（下）</p> <p>案例1：让图片在手机上缩放自如</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.使用<picture>标签</p> <p>2.使用CSS图片</p> <p>案例实现</p> <p>案例2：第三方插件助你升级视频功能</p> <p>案例描述</p> <p>知识点讲解</p> <p>使用HTML5手机播放器</p> <p>案例实现</p> <p>案例3：响应式导航菜单</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.CSS3响应式菜单</p> <p>2.JavaScript响应式菜单</p> <p>案例实现</p> <p>案例4：表格“变形记”</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.隐藏表格中的列</p> <p>2.滚动表格中的列</p> <p>3.转换表格中的列</p> <p>案例实现</p> <p>大白的任务：响应式显示招聘信息</p> <p>12 综合案例—明日学院官网</p> <p>案例1：主页—— 打造高大上的网站门面</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.PC端主页界面的实现过程分析</p> <p>2.手机端主页界面的实现过程分析</p> <p>案例实现</p> <p>案例2：登录页—— 手机端PC端自适应3</p> <p>案例描述</p> <p>知识点讲解</p> <p>1.PC端登录界面实现技巧</p> <p>2.手机端登录界面实现技巧</p> <p>案例实现</p> <p>案例3：课程列表页—— 定制你的课程</p> <p>案例描述</p> <p>知识点讲解</p> <p>Amaze UI 内容列表组件</p> <p>案例实现</p> <p>案例4：课程详情页—— 开启你的学习之旅</p> <p>案例描述</p> <p>知识点讲解</p> <p>Amaze UI 选项卡组件案例实现</p> <p>大白的任务：游戏公园</p> <p>大神的建议（扫码有惊喜）</p> <p>附录1：常用知识点索引</p> <p>附录2：本书推荐视频</p> <p>附录3：HTML 参考手册</p> <p>附录4：CSS3 参考手册</p> <p>附录5：JavaScript 对象参考手册</p> <p>附录6：WebStorm 常用快捷键</p></div> </div> </div> <div class="text-center margin-large-bottom"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-7029444221371985" data-ad-slot="7049136436"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="bookdetails-right"> <div style="height:250px;"> <div class="_8yiuxfzeh64"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u2724904", container: "_8yiuxfzeh64", async: true }); </script> </div> <div class="tit margin-big-top"><h3>本目录推荐</h3></div> <div id="J_commend" class="books-left border"> <ul> <li> <p style="display: none;" class="fold"> <a href="/book/14120151/" title="JewelCAD首饰建模" target="_blank"><i>01</i>JewelCAD首饰建模</a></p> <div class="unfold" style="display: block;"> <i>01</i> <div> <div class="img80"><a href="/book/14120151/" title="JewelCAD首饰建模" target="_blank"><img src="https://img.dushu.com/2024/07/17/1341284775488.jpg_80.jpg" alt="JewelCAD首饰建模"></a></div> <h3><a href="/book/14120151/" title="JewelCAD首饰建模" target="_blank">JewelCAD首饰建模</a></h3> <p></p> </div> </div> </li> <li> <p style="display: block;" class="fold"> <a href="/book/14140688/" title="Photoshop CC项目化翻转课堂教程（第2版）" target="_blank"><i>02</i>Photoshop CC项目化翻转课…</a></p> <div class="unfold" style="display: none;"> <i>02</i> <div> <div class="img80"><a href="/book/14140688/" title="Photoshop CC项目化翻转课堂教程（第2版）" target="_blank"><img src="https://img.dushu.com/2024/11/14/10595092417727.jpg_80.jpg" alt="Photoshop CC项目化翻转课堂教程（第2版）"></a></div> <h3><a href="/book/14140688/" title="Photoshop CC项目化翻转课堂教程（第2版）" target="_blank">Photoshop CC项目化翻转课堂教程…</a></h3> <p></p> </div> </div> </li> <li> <p style="display: block;" class="fold"> <a href="/book/14135593/" title="Premiere+After Effects视频后期制作基础教程（移动学习版）" target="_blank"><i>03</i>Premiere+After Effects视…</a></p> <div class="unfold" style="display: none;"> <i>03</i> <div> <div class="img80"><a href="/book/14135593/" title="Premiere+After Effects视频后期制作基础教程（移动学习版）" target="_blank"><img src="https://img.dushu.com/2024/10/10/08362433782166.jpg_80.jpg" alt="Premiere+After Effects视频后期制作基础教程（移动学习版）"></a></div> <h3><a href="/book/14135593/" title="Premiere+After Effects视频后期制作基础教程（移动学习版）" target="_blank">Premiere+After Effects视频后期…</a></h3> <p></p> </div> </div> </li> <li> <p style="display: block;" class="fold"> <a href="/book/14126267/" title="Web前端技术项目教程：HTML5+CSS3" target="_blank"><i>04</i>Web前端技术项目教程：HT…</a></p> <div class="unfold" style="display: none;"> <i>04</i> <div> <div class="img80"><a href="/book/14126267/" title="Web前端技术项目教程：HTML5+CSS3" target="_blank"><img src="https://img.dushu.com/2024/08/01/10371691475331.jpg_80.jpg" alt="Web前端技术项目教程：HTML5+CSS3"></a></div> <h3><a href="/book/14126267/" title="Web前端技术项目教程：HTML5+CSS3" target="_blank">Web前端技术项目教程：HTML5+CS…</a></h3> <p></p> </div> </div> </li> <li> <p style="display: block;" class="fold"> <a href="/book/14133843/" title="服装CAD教程" target="_blank"><i>05</i>服装CAD教程</a></p> <div class="unfold" style="display: none;"> <i>05</i> <div> <div class="img80"><a href="/book/14133843/" title="服装CAD教程" target="_blank"><img src="https://img.dushu.com/2024/09/13/14353412263558.jpg_80.jpg" alt="服装CAD教程"></a></div> <h3><a href="/book/14133843/" title="服装CAD教程" target="_blank">服装CAD教程</a></h3> <p></p> </div> </div> </li> <li> <p style="display: block;" class="fold"> <a href="/book/14140710/" title="深度学习与图像处理实战" target="_blank"><i>06</i>深度学习与图像处理实战</a></p> <div class="unfold" style="display: none;"> <i>06</i> <div> <div class="img80"><a href="/book/14140710/" title="深度学习与图像处理实战" target="_blank"><img src="https://img.dushu.com/2024/11/14/11001964270987.jpg_80.jpg" alt="深度学习与图像处理实战"></a></div> <h3><a href="/book/14140710/" title="深度学习与图像处理实战" target="_blank">深度学习与图像处理实战</a></h3> <p></p> </div> </div> </li> <li> <p style="display: block;" class="fold"> <a href="/book/14140685/" title="Premiere Pro 2022影视编辑与特效制作案例教程（全彩慕课版）" target="_blank"><i>07</i>Premiere Pro 2022影视编…</a></p> <div class="unfold" style="display: none;"> <i>07</i> <div> <div class="img80"><a href="/book/14140685/" title="Premiere Pro 2022影视编辑与特效制作案例教程（全彩慕课版）" target="_blank"><img src="https://img.dushu.com/2024/11/14/10594520978571.jpg_80.jpg" alt="Premiere Pro 2022影视编辑与特效制作案例教程（全彩慕课版）"></a></div> <h3><a href="/book/14140685/" title="Premiere Pro 2022影视编辑与特效制作案例教程（全彩慕课版）" target="_blank">Premiere Pro 2022影视编辑与特…</a></h3> <p></p> </div> </div> </li> <li> <p style="display: block;" class="fold"> <a href="/book/14126265/" title="数字影视特效设计项目化教程（微课版）" target="_blank"><i>08</i>数字影视特效设计项目化教…</a></p> <div class="unfold" style="display: none;"> <i>08</i> <div> <div class="img80"><a href="/book/14126265/" title="数字影视特效设计项目化教程（微课版）" target="_blank"><img src="https://img.dushu.com/2024/08/01/1037141598369.jpg_80.jpg" alt="数字影视特效设计项目化教程（微课版）"></a></div> <h3><a href="/book/14126265/" title="数字影视特效设计项目化教程（微课版）" target="_blank">数字影视特效设计项目化教程（微…</a></h3> <p></p> </div> </div> </li> <li> <p style="display: block;" class="fold"> <a href="/book/14137683/" title="图像模式识别：基于XAVIS组态软件" target="_blank"><i>09</i>图像模式识别：基于XAVIS…</a></p> <div class="unfold" style="display: none;"> <i>09</i> <div> <div class="img80"><a href="/book/14137683/" title="图像模式识别：基于XAVIS组态软件" target="_blank"><img src="https://img.dushu.com/2024/10/28/10210298469315.jpg_80.jpg" alt="图像模式识别：基于XAVIS组态软件"></a></div> <h3><a href="/book/14137683/" title="图像模式识别：基于XAVIS组态软件" target="_blank">图像模式识别：基于XAVIS组态软…</a></h3> <p></p> </div> </div> </li> <li class="bt"> <p style="display: block;" class="fold"> <a href="/book/14133009/" title="VR无人机素材采集实训教程" target="_blank"><i>10</i>VR无人机素材采集实训教程…</a></p> <div class="unfold" style="display: none;"> <i>10</i> <div> <div class="img80"><a href="/book/14133009/" title="VR无人机素材采集实训教程" target="_blank"><img src="https://img.dushu.com/2024/09/13/08444050845756.jpg_80.jpg" alt="VR无人机素材采集实训教程"></a></div> <h3><a href="/book/14133009/" title="VR无人机素材采集实训教程" target="_blank">VR无人机素材采集实训教程</a></h3> <p></p> </div> </div> </li> </ul> </div> <div class="margin-big-top" id="sidebar"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-7029444221371985" data-ad-slot="1399555633"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="qrcode"></div> <div class="margin-big-top text-center text-gray">扫描二维码</div> </div> </div> </div> <div class="layout" id="footer"> <div class="container padding"> <div class="text-center"> <ul class="nav nav-inline"> <li><a href="/help/1587.html">关于读书</a> </li> <li><a href="/help/1588.html">免责声明</a> </li> <li><a href="/help/1589.html">读书目录</a> </li> <li><a href="/help/1590.html">联系我们</a> </li> </ul> </div> <div class="text-center height-big">Copyright © 读书网 www.dushu.com 2005-2020, All Rights Reserved.</div> <div class="text-center height-big"><a href="http://www.beian.miit.gov.cn/">鄂ICP备15019699号</a> <img src="https://a.dushu.com/img/beian.png" style="vertical-align:middle;margin-left:10px;" /> 鄂公网安备 42010302001612号 <a href="https://www.12377.cn/jbxzxq/64d38691937611ebb858c9da04cf59d3_web.html?spm=zm1033-001.0.0.1.SOXBdI&smallHarmType=64d38691937611ebb858c9da04cf59d3"><img src="https://a.dushu.com/img/jubao.gif" style="vertical-align:middle;margin-left:10px;" /></a></div> </div> </div> <script lang="javascript" type="text/javascript" src="https://a.dushu.com/js/qrcode.min.js"></script> <script lang="javascript" type="text/javascript" src="https://a.dushu.com/js/portamento-min.js"></script> <script lang="javascript" type="text/javascript" src="https://a.dushu.com/js/readmore.min.js"></script> <script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "32" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = '/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)]; $('.txtsummary').readmore({ maxHeight: 140, moreLink: '<a href="#"><span class="icon-arrow-right"></span> 展开全部</a>', lessLink: '<a href="#"><span class="icon-arrow-right"></span> 收起</a>', embedCSS: false }); $('#sidebar').portamento({ disableWorkaround: true, gap: 40 }); $("#qrcode").qrcode({ render: "canvas", width: 200, height: 200, text: location.href }); </script> <script lang="javascript" type="text/javascript" src="https://a.dushu.com/js/autocomplete.min.js"></script> <script lang="javascript" type="text/javascript" src="https://a.dushu.com/js/common.min.js?v=201706"></script> </body> </html>