书籍详情
案例学WEB前端开发：HTML5+CSS3+JavaScript+手机响应式开发（全彩版）
作者：明日科技
出版社：吉林大学出版社
出版时间：2018-07-01
ISBN：9787569225815
定价：¥49.80
购买这本书可以去
内容简介
《案例学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>
<script type="text/javascript" src="//a.99dushu.com/source/n/ix/common/j/production/ffja/h.js"></script>
<div class="content-block-title"><span class="pull-left">猜您喜欢</span></div>
<div class="booklist row bg-white">
<div class="col-33"><a href="/book/14174398/" title="图学习方法及其在高光谱影像处理中的应用"><img src="https://img.dushu.com/2025/05/30/0131151140368010.jpg_200.jpg"><span>图学习方法及其在高光谱影像处理中的应用</span></a></div>
<div class="col-33"><a href="/book/14174370/" title="3D打印与创意设计"><img src="https://img.dushu.com/2025/05/30/01275073840365942.jpg_200.jpg"><span>3D打印与创意设计</span></a></div>
<div class="col-33"><a href="/book/14174365/" title="剪映+Premiere视频剪辑一本通"><img src="https://img.dushu.com/2025/05/30/0127385124036793.jpg_200.jpg"><span>剪映+Premiere视频剪辑一本通</span></a></div>
</div>
<div class="content-padded">
<form name="searchform" action="/search.aspx">
<div class="searchbar">
<div class="search-input">
<label class="icon icon-search" for="search"></label>
<input type="search" name="qd" id="search" value="" placeholder='搜索海量图书...'/>
</div>
</div>
</form></div>
<div class="loadmore"><div class="loadmore-line"></div></div>
<div class="footer">
<div class="footer-links">
<a href="/fenlei.aspx" class="footer-link">全部分类</a>
<a href="/aboutus.aspx" class="footer-link">关于我们</a>
<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" /></a></div>
<div class="footer-text">Copyright © 读书网 dushu.com 2005-2024</div>
</div>
</div></div>
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal theme-dark" id='panel-left'>
<div class="content-block">
<p>读书导航</p>
<form name="searchform" action="/search.aspx">
<div class="search-input">
<label class="icon icon-search" for="search"></label>
<input type="search" name="qd" id="search" value="" placeholder='搜索海量图书...'/>
</div></form>
<div class="list-block contacts-block">
<div class="list-group">
<ul>
<li class="list-group-title"><span class="icon icon-xiaoshuo"></span> 出版图书</li>
<li>
<a href="/book/1001.html" class="item-link item-content">
<div class="item-inner">
<div class="item-title">古籍/国学</div>
</div>
</a>
</li>
<li>
<a href="/book/1002.html" class="item-link item-content">
<div class="item-inner">
<div class="item-title">文学艺术</div>
</div>
</a>
</li>
<li>
<a href="/book/1003.html" class="item-link item-content">
<div class="item-inner">
<div class="item-title">人文社科</div>
</div>
</a>
</li>
<li>
<a href="/book/1004.html" class="item-link item-content">
<div class="item-inner">
<div class="item-title">经济管理</div>
</div>
</a>
</li>
<li>
<a href="/book/1005.html" class="item-link item-content">
<div class="item-inner">
<div class="item-title">生活时尚</div>
</div>
</a>
</li>
<li>
<a href="/book/1006.html" class="item-link item-content">
<div class="item-inner">
<div class="item-title">科学技术</div>
</div>
</a>
</li>
<li>
<a href="/book/1007.html" class="item-link item-content">
<div class="item-inner">
<div class="item-title">教育/教材/教辅</div>
</div>
</a>
</li>
<li>
<a href="/book/1008.html" class="item-link item-content">
<div class="item-inner">
<div class="item-title">少儿</div>
</div>
</a>
</li>
<li>
<a href="/book/1009.html" class="item-link item-content">
<div class="item-inner">
<div class="item-title">工具书</div>
</div>
</a>
</li>
</ul>
</div>
<p><a href="#" class="close-panel">关闭</a></p></div>
</div></div>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script>$.init();</script>
</body>
</html>
