小结:响应式Web设计(HTML5和CSS3实战)
2013-06-14 16:02
148 查看
作者主要传达的思想是: 利用HTML5更富有语义的标签和CSS3优秀的新特性,通过媒体查询与流式布局相结合, 实现精简的响应式网站。
第一章, 讲述了HTML5和CSS3带来的便利, 使开发者更高效的开发和维护网站,同时作者也传达着“渐进增强”的理念,这个在整本书中都可以体会到。
第二章,这一章主要介绍CSS3媒体查询模块,列举一个简单的媒体查询:
例外讨论到,编写页面标签是应该遵守“内容优先”的原则。
第三章,介绍了将固定布局转换为流式布局的公式:目标元素宽度÷上下文元素宽度 = 目标比宽度(结果尽量多保留几位小数),设置弹性图片:
还可以利用PHP脚本生成不同尺寸的图片,详情猛戳:Adaptive-images
第四章,简要的介绍的一些比较常用的HTML5标签, 推荐了一款polyfill--Modernizr, 使不支持HTML5的浏览器兼容。
第五章,介绍了CSS3中一些新的属性选择器,还有颜色模式和透明通道,略过。。
第六章,讲了CSS3中的一些新的属性,像box-shadow, text-shadow以及 gradient(渐变)。
第七章,CSS3过渡变形和强大的动画:
过渡具有四个属性: transition-property(要过渡的CSS属性名称), transition-duration(效果持续的时间), transition-timing-function(速度如何变化:ease, linear or cubic-bezier), transition-delay(可选, 过渡开始时的延迟时间)
变形包括:scale(缩放), translate(移动), rotate(旋转), skew(沿X和Y轴对元素进行斜切), matrix(以像素精度来控制变形效果)
CSS3动画由两部分组成: 关键帧的声明 + 动画属性中使用声明。例如:
第八章, 介绍HTML5中强大的表单, 这个基本跟w3school上的教程类似。
第九章, 跨浏览器解决方案-采用Mondernizr
总体来说, 这本书对响应式网站的建设简单的介绍了下, 对HTML5和CSS3中一些比较常用的标签讲解了一番, 内容看起来不难, 语言还是挺有趣的
第一章, 讲述了HTML5和CSS3带来的便利, 使开发者更高效的开发和维护网站,同时作者也传达着“渐进增强”的理念,这个在整本书中都可以体会到。
第二章,这一章主要介绍CSS3媒体查询模块,列举一个简单的媒体查询:
@media screen and (max-width:960px){ body{ background-color: orange; } } @media screen and (max-width:768px){ body{ background-color: green; } } //代码的意思是:对于视口大小在960px之内的时候背景显示为橘黄色, 如果小于768px的时候新的样式(绿色背景)会覆盖前面的样式。
例外讨论到,编写页面标签是应该遵守“内容优先”的原则。
第三章,介绍了将固定布局转换为流式布局的公式:目标元素宽度÷上下文元素宽度 = 目标比宽度(结果尽量多保留几位小数),设置弹性图片:
img{ max-width: 100%; height: auto; }
还可以利用PHP脚本生成不同尺寸的图片,详情猛戳:Adaptive-images
第四章,简要的介绍的一些比较常用的HTML5标签, 推荐了一款polyfill--Modernizr, 使不支持HTML5的浏览器兼容。
第五章,介绍了CSS3中一些新的属性选择器,还有颜色模式和透明通道,略过。。
第六章,讲了CSS3中的一些新的属性,像box-shadow, text-shadow以及 gradient(渐变)。
第七章,CSS3过渡变形和强大的动画:
过渡具有四个属性: transition-property(要过渡的CSS属性名称), transition-duration(效果持续的时间), transition-timing-function(速度如何变化:ease, linear or cubic-bezier), transition-delay(可选, 过渡开始时的延迟时间)
变形包括:scale(缩放), translate(移动), rotate(旋转), skew(沿X和Y轴对元素进行斜切), matrix(以像素精度来控制变形效果)
CSS3动画由两部分组成: 关键帧的声明 + 动画属性中使用声明。例如:
@keyframe warning{ 0%{ text-shadow: 0 0 5px #000; } 50%{ text-shadow: 0 0 5px #999; } 100%{ text-shadow: 0 0 5px #FFF; } }
h5{ animation: warning 1.5s infinite ease; }
第八章, 介绍HTML5中强大的表单, 这个基本跟w3school上的教程类似。
第九章, 跨浏览器解决方案-采用Mondernizr
总体来说, 这本书对响应式网站的建设简单的介绍了下, 对HTML5和CSS3中一些比较常用的标签讲解了一番, 内容看起来不难, 语言还是挺有趣的
相关文章推荐
- 【实战HTML5与CSS3 第一篇】初探水深,美丽的导航,绚丽的图片爆炸!!
- 响应式Web设计:HTML5和CSS3实践指南 中文pdf扫描版
- HTML5、CSS3与响应式Web设计入门(2)
- 《响应式Web设计—HTML5和CSS3实战》 学习记录
- 18/1/23.HTML5/CSS3的学习(五)——HTML5结构实战案例
- ↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第1章 HTML5、CSS3及响应式设计入门
- ↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第2章 媒体查询:支持不同的视口
- 《响应式web设计》读书笔记(四)HTML5与CSS3
- ↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第3章 拥抱流式布局
- ↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第4章 响应设计中的HTML5
- 响应式web设计,html5和css3实战(@author Ben Fraim)
- 淘试客H5前端web项目实战、HTML5+css3项目案例分享
- HTML5 CSS3实战——自定义音乐播放器(一)
- ↗☻【响应式Web设计 HTML5和CSS3实战 #BOOK#】第5章 CSS3:选择器、字体和颜色模式
- HTML5+CSS3实战(二)——照片墙效果
- 【笔记】web响应式设计:HTML5和CSS3实战 第一章~第三章
- 响应式Web设计(HTML5和CSS3)工具集
- 【实战HTML5与CSS3】免费制作威客页面啦(附源码)
- 【实战HTML5与CSS3】用HTML5和CSS3制作页面(上)
- 【实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码)