css3,html5响应式布局网站模板下载.doc

css3,html5响应式布局网站模板下载

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

关于作者

译者序

前言

第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

1.7CSS3为响应式设计和更多创新奠定了基础

?

?1.7.1底线:CSS3不破坏任何东西1.7.2CSS3如何解决日常设计问题

1.8看呐，不用图片

?

?

?

?CSS3还带来了什么1.9HTML5和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

?

?

?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.2设置百分比元素的上下文3.3.3必须时刻牢记上下文3.4用em替换px3.5弹性图片

3

?

?

??3.5.1让图片随视口缩放3.5.2为特定图片指定特定规则3.5.3给弹性图片设置阈值3.5.4超级全能的max-width属性

?3.6为不同的屏幕尺寸提供不同的图片

?设置自适应图片

???把背景图片放在其他地方

?

?3.7流动网格布局和媒体查询的默契配合3.8CSS网格系统

?使用网格系统快速搭建网站

?3.9小结

第4章响应式设计中的HTML5

?4.1HTML5的哪些部分现在就能用

?

?

?4.1.1大多数网站可以用HTML5编写4.1.2腻子脚本和Modernizr4.2如何编写HTML5网页

?

?4.2.1HTML5的精简之道4.2.2HTML5标签的合理写法

4

?

?4.2.4HTML的废弃零件4.3HTML5的全新语义化元素

?

?

?

?

?4.3.1lt;section4.3.2lt;nav4.3.3lt;article4.3.4

lt;aside4.3.5lt;hgroup

???HTML5的大纲结构算法

?

?

?4.3.6lt;header4.3.7lt;footer4.3.8lt;address

?4.4HTML5结构元素的实际用法

?网站的主体内容怎么办,

?4.5HTML5的文本级语义元素

?

?

?

?4.5.1lt;b4.5.2lt;em4.5.3lt;i4.5.4在页面中应用文本层语义元素

?4.6遵循WAI-ARIA实现无障碍站点

?ARIA的地标角色

5

?

?

4.7在HTML5中嵌入媒体4.8用HTML5的方法为页面添加视频或音频

?

?

?

?4.8.2针对老版本浏览器的备用方案4.8.3lt;audio和lt;video标签的用法基本一致4.9响应式视频4.10离线Web应用

?

?

?

?

?

?

?4.10.1离线Web应用概述4.10.2让网页可离线使用4.10.3理解manifest文件4.10.4页面被自动加载到离线缓存4.10.5版本注释的用途4.10.6离线访问网站4.10.7离线Web应用的故障诊断

?4.11小结

第5章CSS3:选择器、字体和颜色模式

6

?