移动web开发布局

项目2–移动Web开发常见布局

PDF

–学习目标/Target

  • 了解什么是流式布局
  • 掌握flex弹性盒布局以及使用方式
  • 掌握媒体查询的使用方法
  • 掌握如何实现移动端设备的Rem适配布局
  • 掌握SassLess的使用方法(下一个项目再讲)

–项目说明/Summary

在移动Web开发中,可以通过流式布局弹性盒布局Rem适配布局来制作移动端页面。此外,我们还可以将上述三大布局与媒体查询结合起来创建响应式页面,实现一个页面同时兼容PC端和移动端。为了提高CSS样式代码的编写效率,我们可以使用SassLess编写复用性更优的CSS代码。在掌握了这些技术后,就已经可以编写响应式页面了。

【Flex-实战演练】确认订单

PDF

–学习目标/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

paperbox

https://www.sun11.me/

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"