移动web开发布局
项目2–移动Web开发常见布局
–学习目标/Target
- 了解什么是流式布局
- 掌握flex弹性盒布局以及使用方式
- 掌握媒体查询的使用方法
- 掌握如何实现移动端设备的Rem适配布局
- 掌握Sass和Less的使用方法(下一个项目再讲)
–项目说明/Summary
在移动Web开发中，可以通过流式布局、弹性盒布局和Rem适配布局来制作移动端页面。此外，我们还可以将上述三大布局与媒体查询结合起来创建响应式页面，实现一个页面同时兼容PC端和移动端。为了提高CSS样式代码的编写效率，我们可以使用Sass或Less编写复用性更优的CSS代码。在掌握了这些技术后，就已经可以编写响应式页面了。
【Flex-实战演练】确认订单
–学习目标/Target
-
使用flex弹性盒布局模型快速开发网页
体会flex弹性盒布局的应用
- 扎实flex弹性盒布局的知识点
关于浏览器市场份额的那点事儿
以前关于浏览器市场份额总是去找百度——百度统计，最近发现找不着了~ 也许，百度不做这方面的统计了~反正没找着。不过，还好有Statcounter。记录一下……
关于 Statcounter GlobalStats
https://gs.statcounter.com/Statcounter Global Stats 由Statcounter - 免费的在线访客统计工具提供给您。
数据样本
统计数据基于 Statcounter 收集的汇总数据，该样本每月从超过 150 万个网站的 Statcounter 网络中收集超过 50 亿次网页浏览量。统计数据每天都会更新并提供，但在发布后的 45 天内必须接受质量保证测试和修订。
HMTL5+CSS3+JS=交互六面体
深夜偶遇一个站，发现一段代码 “HMTL5+CSS3+JS=交互六面体” 很不错，必须梳理记录一下：老话说的好：“好记性不如烂笔头”。
1. 发现的过程——由来：
本姐常常整理资料，因为常常混乱，“断舍离”！刚要删掉：CSS完全参考手册.chm ，
不知怎么想看看作者，于是：
- 中文名：杜瑶
- 英文名：Joy Du
- 网 名：飘零雾雨
- 博 客：CSS探索之旅
命中缺水吗？起了这么个网名？？？
2. 沿着链走——走着：
沿链走着~~~，挺好的第三方页面。于是直接到底。由 Hexo 强力驱动 主题 - NexT.Mist
继续沿链走着~~~，https://hexo.io/ 下的一个主题Themes，“冥冥神神佛佛……你们都知道我为何点他？！就我不知道为何点他？！” 就是他——>Paperbox A responsive paper-like theme！
paperbox
https://www.sun11.me/
3.一见钟情——HTML+CSS3+JS六面体
一眼就相中那个六面体了，于是，“起锅——烧油——HTML+CSS3+JS—–锅里捣”，一切顺利！完活儿~录个屏，生个GIF ，感谢 FSCapture！
交互六面体完成后的效果
4.絮絮叨叨——多说一点儿：
什么是Hexo？
Hexo是一个快速，简单和强大的博客框架。您用Markdown（或其他标记语言）编写帖子，Hexo在几秒钟内生成具有精美主题的静态文件。
Hexo 6.3.0 发布 日期是 曾经的版本更新发布的也很频繁，说明：存在的，就是适用宜用的。愿越来越好！致敬勤恳的开发者！
css中zoom:1属性的定义和作用
CSS zoom属性
zoom：设置或检索对象的缩放比例，触发IE浏览器的haslayout属性，解决浮动，margin重叠等一些问题。
语法：
zoom:normal
参数：
- normal：使用对象的实际尺寸(默认值)
- number：用数字来定义缩放比例，不能出现负数，
例：zoom:5
percentage：用百分比来定义缩放比例，不能出现负数
例：zoom:200%
zoom是IE浏览器的专用属性，以前火狐以及谷歌等一些其它浏览器是不支持的，也没有通过W3C的标准。不过现在这个属性开始标准化，已经出现在了css3的草案中。
用css中的zoom属性可以让网页实现IE7中的放大缩小功能。
比如你想让你的网页缩小为原来的一半，那么就在body中加入style="zoom:0.5"