响应式Web设计：HTML5和CSS3实战【下载在线阅读书评】

搜索书名或作者...

当前位置：首页 > 计算机 > 响应式Web设计：HTML5和CSS3实战

响应式Web设计：HTML5和CSS3实战

8.5 ( 63个评分 )

作者：	【英】Ben Frain
译者：	王永强
版权：	北京图灵文化发展有限公司
出版：	2013-01-01

读者保障计划

¥ 18.00 | 原价~~¥ 25.00~~ 纸书~~¥ 49.00~~ 3.7折

立即支付加入购物车试读

网页设计入门经典教程，html、css、javascript技术应用详解！
未来处于技术主流地位的响应式设计，网站运营必备利器！
图文并茂，让你轻松掌握最新设计技术！

响应式Web设计具有巨大的潜在商业价值，而本书将其讲得非常透彻！
本书将当前Web设计中热门的响应式设计技术与HTML5和CSS3结合起来，为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。
作者BenFrain是一名具有十多年经验的网页设计师和前端工程师，同时还是一名技术记者，定期为一些关注Mac平台、前沿科技、网页设计和航空技术的刊物撰稿，文字表达简单直接，严谨科学。
本书不仅讨论了媒体查询、流式布局、相对字体、响应式媒体，更将HTML5和CSS3的相关知识点一并讲解，是学习最新Web设计技术不可多得的佳作。
适合各个层次的Web开发和设计人员阅读！

显示全部

版权声明

Copyright © 2012 Packt Publishing. First published in the English language under the title Responsive Web Design with HTML5 and CSS3. Simplified Chine……
译者序

蒂姆·伯纳斯-李在1991年制作并发布了第一个网站，如今刚刚过去21个年头。在这21年里，计算机和互联网快速发展，这个世界的面貌也日新月异。在这个过程中，网页设计从无到有，从简单渐至专业，从可有可无变为广受关注。网页设计方法也在跟随时代不断创新，从最初简单的文字排版，到表格布局，再到DIV+CSS，……
前言

前　言如果你想给自己的网站做一个单独的“手机版”，请三思而后行！响应式网页设计提供了一种设计方法，可以使同一网站在智能手机、桌面电脑，以及介于这两者之间的任意设备上完美显示。这种方法能够根据用户的屏幕尺寸，合理地为现有及将来的各种设备提供最佳的浏览体验。本书提供了一整套方法，用来将一个现有的固定……
致谢

致　谢首先要感谢网络社区。没有大家集思广益的才智、慷慨大方的文档和开放共享的解决方案，我不可能在互联网行业做出现在这点还稍稍令我自豪的事情。其次，我要感谢响应式网页设计之父Ethan Marcotte。他和我从未谋面或交谈过，但他的方法论现在每时每刻都在影响着我制作网页的方法。毫无疑问，假如有哪……
第1章　HTML5、CSS3及响应式设计入门

……
第2章　媒体查询：支持不同的视口

……
第3章　拥抱流式布局

20世纪90年代末，我刚学习做网页的时候，页面布局结构都是基于表格的。通常，屏幕上显示的各部分元素都是百分比宽度。例如，左侧的导航栏可能占据20%的屏幕宽度，主内容区占据80%。那时的浏览器视口还没有像今天这样天差地别，所以表格式布局在有限范围的视口中表现良好且能自由伸缩。没人太在意某些句子在不同大……
第4章　响应式设计中的HTML5

HTML5是从Web Applications1.0项目发展而来的，由网页超文本技术工作小组（WHATWG）发起，后被W3C采纳。HTML5规范的大部分内容都偏重于处理Web应用程序。就算你不创建Web应用程序，也并不意味着HTML5对你制作响应式设计就没有太大价值。所以，HTML5的一部分特性与制……
第5章　CSS3：选择器、字体和颜色模式

第1章我们提到过，通过移动通信网络来浏览网页的人越来越多。当前电信网络的速度差异很大，所以我们需要考虑带宽限制和网站的加载时间。这就像回到了当年使用56K调制解调器的时代，不得不考虑页面及其中包含的图片和多媒体文件需要加载多长时间。现在，我们得面对与之类似的加载时间问题。正如表格布局技术中的百分比规……
第6章　用CSS3创造令人惊艳的美

上一章，我们学习了一些简捷有效的CSS3技巧，対制作响应式设计很有帮助。另外还使用CSS3的@font-face规则为网页添加了自定义字体，使其视觉效果大大提升。此外还学习了CSS3中选择DOM元素的工具。在学习了这些基础知识之后，我们来看看CSS3的一些高级特性，这些特性能给我们的响应式设计带来显……
第7章　CSS3过渡、变形和动画

在前面两章中，我们学习了一些CSS3的新特性和新功能。不过到目前为止，我们看到的所有效果都是静态的。其实CSS3能做的远不止于此。目前的情况是，如果页面上需要一些动画效果，要么你自己编写JavaScript，要么使用JavaScript框架（如jQuery）来提高效率。但是，一些熟悉CSS3的同志……
第8章　用HTML5和CSS3征服表单

过去，想要让表单风格跨浏览器保持一致是很困难的。而且还需要JavaScript来验证表单输入，此外，也缺少一些处理日常信息（如电话号码、电子邮箱以及URL）的输入类型。好消息是HTML5基本上解决了这些常见的问题。接下来我们来熟悉一下新的HTML5表单特性，来看看它们如何减轻我们的负担。在响应式……
第9章　解决跨浏览器问题

在最后一章，我们将学习以下内容渐进增强和优雅降级之间的根本区别如何让老版本Internet Explorer支持响应式设计何如使用Modernizr按需加载CSS文件何如使用Modernizr按需加载JavaScript补丁文件如何将超长导航列表在小视口中转换为选择菜单如何为高分辨率（视……

显示全部

移动设备阅读

扫二维码下载客户端

<% if(!status.free) { %>
<% if(!status.paid || !status.login){ %>
<% if(status.data.webreader && status.limitedfree) { %>
<a href="http://www.duokan.com/reader?id=fb3d92a2660611e2bee100163e0123ac" class="u-btn4 limitedfreetag" hidefocus="hidefocus">免费读全本<span class="icn-limitfree2"></span></a>
<% } else if(status.data.webreader && [127255, 110818].indexOf(+status.data.sid) == -1) { %>
<a href="http://www.duokan.com/reader?id=fb3d92a2660611e2bee100163e0123ac" class="u-btn2" hidefocus="hidefocus" target="_blank">阅读</a>
<% } %>
<% } %>
<% if(!status.paid){ %>
<a onclick="_hmt.push(['_trackEvent', 'book_detail_page', 'pay_click'])" href="/pay/<%= status.data.sid %><%= status.coupon ? '#coupon' : '' %>" class="u-btn j-buy" hidefocus="hidefocus">
<% if(status.coupon){ %>
<span class="quan">券</span>免费兑换
<% }else{ %>
购买全本
<% } %>
</a>
<% }else{ %>
<% if(!status.data.webreader){ %>
<a href="javascript:void(0)" class="u-btn-disable" hidefocus="hidefocus">已购买</a>
<% }else{ %>
<a href="http://www.duokan.com/reader?id=fb3d92a2660611e2bee100163e0123ac" class="u-btn2" hidefocus="hidefocus" target="_blank">阅读</a>
<% } %>
<% } %>
<% }else{ %>
<% if(!status.paid){ %>
<% if(!!status.data.webreader){ %>
<a href="http://www.duokan.com/reader?id=fb3d92a2660611e2bee100163e0123ac" class="u-btn2 j-free" hidefocus="hidefocus" target="_blank">阅读</a>
<% } %>
<a href="javascript:void(0);" class="u-btn j-get" hidefocus="hidefocus">加入书架</a>
<span class="added" style="display:none">已加入书架</span>
<% }else{ %>
<% if(!status.data.webreader){ %>
<a href="javascript:void(0);" class="u-btn-disable" hidefocus="hidefocus">已领取</a>
<% }else{ %>
<a href="http://www.duokan.com/reader?id=fb3d92a2660611e2bee100163e0123ac" class="u-btn2" hidefocus="hidefocus" target="_blank">阅读</a>
<span class="added">已加入书架</span>
<% } %>
<% } %>
<% } %>

<ul class="f-cb">
<% if(!status.cart && !status.paid && !status.free){ %>
<li class="cart"><a class="j-cart" href="javascript:void(0);" hidefocus="hidefocus">加入购物车</a><span style="display:none;" href="javascript:void(0);">已加入</span><span class="u-sep">|</span></li>
<% }else if(status.cart && !status.paid && !status.free){ %>
<li class='cart'><span href="javascript:void(0);" hidefocus="hidefocus">已加入</span><span class="u-sep">|</span></li>
<% } %>
<% if(!status.fav) { %>
<li><a class="j-fav" href="javascript:void(0);" hidefocus="hidefocus">收藏</a><a style="display:none;" href="javascript:void(0);" class="j-cancel-fav">已收藏</a><span class="u-sep">|</span></li>
<% }else{ %>
<li><a class="j-fav" href="javascript:void(0);" style="display:none;" hidefocus="hidefocus">收藏</a><a href="javascript:void(0);" class="j-cancel-fav">已收藏</a><span class="u-sep">|</span></li>
<% } %>
<li class="">
<a href="javascript:void(0);" class="j-share" hidefocus="hidefocus">分享</a>
<% if(!status.free) { %>
<span class="u-sep hide-in-wx">|</span>
<% } %>
</li>
<% if(!status.free) { %>
<li class="u-gift hide-in-wx"><a href="/giving/<%= status.data.sid %>" hidefocus="hidefocus">赠送<b class="icn-gift"></b></a></li>
<% } %>
</ul>

<div class="u-comm-reply">
<% if(book.logged) { %>
<div class="form">
<form>
<input name="content" data-required="true" type="text" class="u-txt" value="" />
<a href="javascript:void(0)" class="u-btn j-doreply" hidefocus="hidefocus">发表回复</a>
</form>
<div class="u-msg u-msg-error" style="display:none">回复不要太快哦~</div>
<div class="u-msg u-msg-error" style="display:none">回复内容不能为空哦</div>
<div class="u-msg u-msg-ok" style="display:none">回复已提交审核...</div>
</div>
<% }else{ %>
<div class='form_disable'><em>快登录帐号来一起讨论吧～</em><a href="javascript:void(0);" hidefocus="hidefocus" class="j-login">登录</a><span class="u-sep">|</span><a href="javascript:void(0);" class="j-login" hidefocus="hidefocus">注册</a></div>
<% } %>
<% if(book.total) { %>
<div class="list">
<div class="total">共<span class="num"><%= book.total %></span>条回复</div>
<ul class="u-replylist j-replylist">
</ul>
<% if(book.total > 10) { %>
<div class="w-more2"><a href="<%= window.dk_data.comments_url + '/' + comment_id %>">查看全部回复<b></b></a></div>
<% } %>
<div class="icn-quotes"><span>“</span></div>
</div>
<% } %>
<div class="icn-triangle icn-triangle-top1"><span class="t"></span></div>
</div>

[

{ sid : '5047',
id : '4da43e2207a911e2aae200163e0123ac',
webreader : 1,
title : 'Go语言编程',
price : '19.99',
old_price : '25.0',

new_price : '19.99',

cover : 'http://cover.read.duokan.com/mfsv2/download/s010/p01pX0dhyew1/hw7vnjngkVpWJA.jpg!vt',
url : '/book/5047',
authors : '许式伟\\n吕桂华'
}
,

{ sid : '3647',
id : '44da6a38fd5811e19c0200163e0123ac',
webreader : 1,
title : '高效程序员的45个习惯',
price : '18.0',
old_price : '18.0',

cover : 'http://cover.read.duokan.com/mfsv2/download/fdsc3/p01pFXB31WQK/1ZjCf1N0DetEY1.jpg!vt',
url : '/book/3647',
authors : '【美】Venkat Subramaniam\\n【美】Andy Hunt'
}
,

{ sid : '2312',
id : '1909f6eef26811e1b0a700163e0123ac',
webreader : 1,
title : '我编程，我快乐',
price : '18.0',
old_price : '18.0',

cover : 'http://cover.read.duokan.com/mfsv2/download/s010/p01p8BguJKTx/EDe75qybCLy03t.jpg!vt',
url : '/book/2312',
authors : '【美】Chad Fowler'
}
,

{ sid : '246',
id : '25215787c0574dab9e69a48fa8ea616b',
webreader : 1,
title : '黑客与画家',
price : '12.0',
old_price : '25.0',

new_price : '12.0',

cover : 'http://cover.read.duokan.com/mfsv2/download/s010/p01hMA9QkykN/UYlCPk3uXMUG1V.jpg!vt',
url : '/book/246',
authors : '【美】格雷厄姆'
}
,

{ sid : '10892',
id : '40d9a4e625a611e2a3ca00163e0123ac',
webreader : 1,
title : '人人都是产品经理',
price : '22.99',
old_price : '30.0',

new_price : '22.99',

cover : 'http://cover.read.duokan.com/mfsv2/download/s010/p016d2jVwnTm/z9ZOGDe8Z7PlAo.jpg!vt',
url : '/book/10892',
authors : '苏杰'
}
,

{ sid : '116',
id : '407d431409b448fc8ad272d436075257',
webreader : 1,
title : '布道之道',
price : '12.0',
old_price : '18.0',

new_price : '12.0',

cover : 'http://cover.read.duokan.com/mfsv2/download/s010/p01D06nBbFtA/fgxQyn62WfvvoH.jpg!vt',
url : '/book/116',
authors : '【美】Terrence Ryan'
}
,

{ sid : '11747',
id : 'd92c65e8320e11e28a9300163e0123ac',
webreader : 1,
title : '卓越程序员密码',
price : '12.0',
old_price : '18.0',

new_price : '12.0',

cover : 'http://cover.read.duokan.com/mfsv2/download/s010/p014VH0D1r8r/0hKtjqviAxeZjU.jpg!vt',
url : '/book/11747',
authors : '【美】Ka Wai Cheung'
}
,

{ sid : '68638',
id : 'dce6701dd20f409ea0f3bdbad3badcc6',
webreader : 1,
title : 'SQL必知必会（第4版）',
price : '12.0',
old_price : '18.0',

new_price : '12.0',

cover : 'http://cover.read.duokan.com/mfsv2/download/s010/p01c2zZrbsG7/PC8EPyC9QBP1J1.jpg!vt',
url : '/book/68638',
authors : '【美】Ben Forta'
}
,

{ sid : '5267',
id : '63cde66807bc11e2b02b00163e0123ac',
webreader : 1,
title : '编程大师访谈录',
price : '24.99',
old_price : '25.0',

new_price : '24.99',

cover : 'http://cover.read.duokan.com/mfsv2/download/s010/p01IHlmcdX9c/wpIte20VIQIfMK.jpg!vt',
url : '/book/5267',
authors : '【美】Susan Lammers'
}
,

{ sid : '42003',
id : '457ab3fca29242428f7303ce81ab447b',
webreader : 1,
title : '启示录：打造用户喜爱的产品',
price : '25.0',
old_price : '25.0',

cover : 'http://cover.read.duokan.com/mfsv2/download/s010/p01Dr8fqlnsX/D9Fnti2z6WGgEU.jpg!vt',
url : '/book/42003',
authors : '【美】Marty Cagan'
}
,

{ sid : '1897',
id : '09d88212e38611e18f0200163e0123ac',
webreader : 1,
title : '简约至上',
price : '12.0',
old_price : '12.0',

cover : 'http://cover.read.duokan.com/mfsv2/download/s010/p01pWH8Iqka5/y8pXSxwM66Jbqo.jpg!vt',
url : '/book/1897',
authors : '【英】科尔伯恩'
}
,

{ sid : '1522',
id : '87f819bad9e411e192a600163e0123ac',
webreader : 1,
title : 'HTML5和CSS3实例教程',
price : '18.0',
old_price : '18.0',

cover : 'http://cover.read.duokan.com/mfsv2/download/s010/p012hXSM0FEY/ludfzP3sOEqlGH.jpg!vt',
url : '/book/1522',
authors : '【美】霍根'
}
,

{ sid : '85361',
id : '83d323df67004f04b26774440049743c',
webreader : 1,
title : 'Blender权威指南',
price : '68.0',
old_price : '68.0',

cover : 'http://cover.read.duokan.com/mfsv2/download/s010/p01iSWJmHNYt/27Xfjk4gqg4Vtk.jpg!vt',
url : '/book/85361',
authors : '罗聪翼'
}
,

{ sid : '13422',
id : '7d51802e349711e2953100163e0123ac',
webreader : 1,
title : '网站UI设计之道',
price : '34.99',
old_price : '40.0',

new_price : '34.99',

cover : 'http://cover.read.duokan.com/mfsv2/download/s010/p01K4Vy0rfj7/DxfJ9UQVAkogoV.jpg!vt',
url : '/book/13422',
authors : '【德】Smashing Magazine'
}
,

{ sid : '12807',
id : '2d6f6910323311e28a9300163e0123ac',
webreader : 1,
title : '写给程序员的Web设计书',
price : '12.0',
old_price : '18.0',

new_price : '12.0',

cover : 'http://cover.read.duokan.com/mfsv2/download/s010/p010IG4x0fc0/kuh0raZ9ULVucC.jpg!vt',
url : '/book/12807',
authors : '【美】霍根'
}
,

{ sid : '28747',
id : '519eb239ca2c4517bf5e1c07789c29c7',
webreader : 1,
title : '网站UI设计之道 2',
price : '37.99',
old_price : '40.0',

new_price : '37.99',

cover : 'http://cover.read.duokan.com/mfsv2/download/s010/p01hMA9QkykN/n9NynflRs1YvTE.jpg!vt',
url : '/book/28747',
authors : '【德】Smashing Magzine'
}

]