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

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

     

    编辑推荐

    前端设计人员必备教程
    图文并茂,轻松掌握最新设计技术
    全面应用HTML5和CSS3,一步跨入最前沿

    内容简介

    移动互联网时代到来了。《响应式Web设计:HTML5和CSS3实战》将当前Web设计中热门的响应式设计技术与HTML5和CSS3结合起来,为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。不仅讨论了媒体查询、流式布局、相对字体、响应式媒体,更将HTML5和CSS3的相关知识点一并讲解,是学习最新Web设计技术不可多得的佳作。《响应式Web设计:HTML5和CSS3实战》适合各个层次的Web开发和设计人员阅读。

    作者简介

    BenFrain是一名具有十多年经验的网页设计师和前端工程师,直接与世界各地的客户和设计机构并肩工作。同时他还是一名技术记者,定期为一些关注Mac平台、前沿科技、网页设计和航空技术的刊物撰稿。在此之前,他曾是一名怀才不遇的(而且谦虚谨慎的)电视演员,毕业于索尔福德大学的媒体与表演专业。他写了四部(自认为)同样被低估的剧本,而且始终心怀能卖出一部的信念(尽管不像最初那么强烈了)。工作之余,在身体(和妻子)允许的情况下,他喜欢玩室内足球。

    目录

    第1章  HTML5、CSS3及响应式设计入门
    1.1  为什么智能手机很重要(而老版的IE不再重要)
    1.2  响应式设计一定是最佳选择吗
    1.3  响应式网页设计的定义
    1.4  为什么要在响应式设计上停滞不前
    1.5  响应式网页设计示例
    1.5.1  下载视口调试工具
    1.5.2  在线创意源泉
    1.6  为什么HTML5很优秀
    1.6.1  省时省力
    1.6.2  新增了语义化标签元素
    1.7  CSS3为响应式设计和更多创新奠定了基础
    1.7.1  底线:CSS3不破坏任何东西
    1.7.2  CSS3如何解决日常设计问题
    1.8  看呐,不用图片
    1.9  HTML5和CSS3现在就能用吗
    1.10  响应式网页设计不是灵丹妙药
    1.11  引导客户:网站不必在所有浏览器中表现一致
    1.12  小结

    第2章  媒体查询:支持不同的视口
    2.1  现在就能使用媒体查询
    2.2  为什么响应式设计需要媒体查询
    2.2.1  媒体查询语法
    2.2.2   媒体查询能检测那些特性
    2.2.3  用媒体查询改造我们的设计
    2.2.4  加载媒体查询的最佳方法
    2.3  我们的第一个响应式设计
    2.3.1  我们的设计是固定宽度的,不要惊讶
    2.3.2  响应式设计中要保证图片尽可能精简
    2.3.3  小视口下的内容剪切
    2.4  阻止移动浏览器自动调整页面大小
    2.5  针对不同视口宽度修正设计
    2.6  响应式设计中内容始终优先
    2.7  媒体查询只是必要条件之一
    2.8  小结

    第3章  拥抱流式布局
    3.1  固定布局经不起未来考验
    3.2  为什么响应式设计需要百分比布局
    3.3  将网页从固定布局修改为百分比布局
    3.3.1  需要牢记的公式
    3.3.2  设置百分比元素的上下文
    3.3.3  必须时刻牢记上下文
    3.4  用em替换px
    3.5  弹性图片
    3.5.1  让图片随视口缩放
    3.5.2  为特定图片指定特定规则
    3.5.3  给弹性图片设置阈值
    3.5.4  超级全能的max-width属性
    3.6  为不同的屏幕尺寸提供不同的图片
    3.7  流动网格布局和媒体查询的默契配合
    3.8  CSS网格系统
    3.9  小结

    第4章  响应式设计中的HTML5
    4.1  HTML5的哪些部分现在就能用
    4.1.1  大多数网站可以用HTML5编写
    4.1.2  腻子脚本和Modernizr
    4.2  如何编写HTML5网页
    4.2.1  HTML5的精简之道
    4.2.2  HTML5标签的合理写法
    4.2.3  伟大的标签万岁
    4.2.4  HTML的废弃零件
    4.3  HTML5的全新语义化元素
    ……

    第5章  CSS3:选择器、字体和颜色模式
    5.1  CSS3给前端开发人员带来了什么
    5.1.1  Internet Explorer 6到8对CSS3的支持
    5.1.2  使用CSS3设计和开发页面
    5.2  CSS规则解析
    5.3  私有前缀及其用法
    5.4  快速而有效的CSS技巧
    5.4.1  CSS3多栏布局
    5.4.2  文字换行
    5.5  CSS3的新增选择器及其用法
    5.5.1  CSS3属性选择器
    5.5.2  CSS3结构伪类
    5.5.3  对伪元素的修正
    5.6  自定义网页字体
    5.6.1  @font-face规则
    5.6.2  使用@font-face嵌入网页字体
    5.7  帮帮我,标题模糊怎么办
    5.8  新的CSS3颜色格式和透明度
    5.8.1  RGB颜色
    5.8.2  HSL颜色
    5.8.3  针对IE6、IE7和IE8提供备用颜色值
    5.8.4  透明通道
    5.9  小结

    第6章  用CSS3创造令人惊艳的美
    6.1  文字阴影
    6.1.1  HEX、HSL或RGB颜色都可以
    6.1.2  px、em或rem都行
    6.1.3  取消文字阴影
    6.1.4  制作浮雕文字阴影效果
    6.1.5  多重文字阴影
    6.2  盒阴影
    6.2.1  内阴影
    6.2.2  多重阴影
    6.3  背景渐变
    6.3.1  线性背景渐变
    6.3.2  径向背景渐变
    6.3.3  重复渐变
    6.4  背景渐变图案
    6.5  CSS3的响应性
    6.6  组合使用CSS3属性
    6.7  多重背景图片
    6.7.1  背景图片大小
    6.7.2  背景图片位置
    6.7.3  背景属性的缩写语法
    6.8  更多CSS特性
    6.9  可缩放图标:响应式设计中的完美选择
    6.10  小结

    第7章  CSS3过渡、变形和动画
    7.1  什么是CSS3过渡以及如何使用它
    7.1.1  过渡相关的属性
    7.1.2  响应式网站中的有趣过渡
    7.2  CSS3的2D变形
    7.3  尝试CSS3的3D变形
    7.3.1  分析3D变形效果
    7.3.2  3D变形尚未成熟
    7.4  CSS3动画效果
    7.5  小结

    第8章  用HTML5和CSS3征服表单
    8.1  HTML5表单
    8.1.1  理解HTML5表单中的元素
    8.1.2  placeholder
    8.1.3  required
    8.1.4  autofocus
    8.1.5  autocomplete
    8.1.6  list(及对应的datalist元素)
    8.1.7  HTML5的新输入类型
    8.1.8  日期和时间输入类型
    8.2  如何给不支持新特性的浏览器打补丁
    8.3  使用CSS3美化HTML5表单
    8.4  小结

    第9章  解决跨浏览器问题
    9.1  渐进增强与优雅降级
    9.2  该不该修复老版本IE
    9.2.1  统计数据(再看看世界的变化)
    9.2.2  个人选择
    9.3  前端的瑞士军刀:Modernizr
    9.3.1  使用Modernizr辅助修正样式问题
    9.3.2  使用Modernizr让老版本IE支持HTML5元素
    9.3.3  给IE6、7、8追加min/max媒体查询功能
    9.3.4  使用Modernizr按需加载资源
    9.4  必要时将导航链接转换为下拉菜单
    9.5  高分辨率设备(未来趋势)
    9.6  小结

    前言

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

    本书提供了一整套方法,用来将一个现有的固定宽度的网站设计变成响应式的。此外,本书应用HTML5和CSS3提供的最新最有用的技术,扩展了响应式网页设计的方法论,以便网站更简洁、更易于维护。本书还讲解了编写和发布代码、图片、文件的最佳实践。

    只要你懂HTML和CSS,你就能制作响应式网站。

    本书内容

    第1章,HTML5、CSS3及响应式设计入门,定义了什么是响应式网页设计,展示了一些响应式设计的网站示例,重点强调了使用HTML5和CSS3的优势。

    第2章,媒体查询:支持不同的视口,讲解了什么是媒体查询,如何实现媒体查询,以及如何针对设备能力匹配CSS样式,将其应用于任意设计。

    第3章,拥抱流式布局,讲解了流式布局的优点,以及如何将一个现有的固定宽度设计轻松地转换为流式布局,怎样使用CSS框架快速搭建响应式网页。

    第4章,响应式设计中的HTML5,探讨了使用HTML5技术的诸多好处,比如更简洁的代码、语义化标签、离线存储,以及无障碍网页应用辅助技术。

    第5章,CSS3:选择器、字体和颜色模式,展示了CSS3选择器的强大威力,可以让你轻松地指定和改变任何元素。还讲解了通过@font-face声明来使用漂亮的网络字体,另外讲解了新的CSS3颜色模式如RGB(A)和HSL(A)。

    第6章,用CSS3创造令人惊艳的美,展示了如何使用纯粹的CSS3代码实现文字阴影、盒阴影和渐变效果。还涵盖了如何使用多重背景图片,以及如何通过字体文件创建图标。

    第7章,CSS3的过渡、变形和动画,讲解如何仅使用CSS3来创建和转换屏幕上的元素,并制作动画效果。

    第8章,用HTML5和CSS3征服表单,阐述了在所有设备上(从最新的智能手机到桌面版浏览器)都能良好运行的跨浏览器表单开发技巧。

    第9章,解决跨浏览器问题,讲解了如何保证老版本的InternetExplorer可响应,如何将一组链接修改成移动设备上的一个菜单,如何为高分辨率显示器提供不同内容,以及如何使用Modernizr框架分条件地加载资源文件。

    准备工作

    你必须对HTML和CSS很熟悉。有一点JavaScript基础会很有帮助。良好的电影品味也很有益处。

    本书读者

    你是否正在开发两套网站,一套给移动设备,一套给大显示器?又或者你已听说过“响应式网页设计”但却不确定如何将HTML5、CSS3和响应式设计融合在一起?如果是,那么本书可以让你在所有竞争对手之前,将你的网站提升到一个更高层次。

    本书面向那些正在使用HTML 4.01和CSS2.1开发固定宽度网站的网页设计师和开发人员,讲解了如何使用HTML5和CSS3制作可适应任意屏幕尺寸设备的响应式网站。

    本书约定

    本书中使用几种不同的文字样式来区分不同类型的信息,具体约定如下。

    正文中的代码使用如下格式:

    “HTML5接受宽松语法,例如 这样的语句也是有效的。”

    获取正版《响应式Web设计:HTML5和CSS3实战》直达购买
    • 微信号
    • 网站问题、用户注册登录请联系站长,看到第一时间及时回复。
    • weinxin
    • 公众号
    • 慧眼看每日荐书,关键字找书,新功能陆续增加中,敬请关注!
    • weinxin
    huiyan
    • 本文由 发表于 2019-08-0408:54:55
    • 转载请务必保留本文链接:https://www.huiyankan.com/20190804082090.html