关于flex布局，可以看我这篇 图解Flex布局 本文基于的框架：微信小程序、uniapp（Vue.js）、SCSS。原理是一样的，我就不转换成原生的Vue.js和css了。 原理： 模板： v-for="i in 5" 循环显示5个bar :style="{ 'height': readingHoursHeight[i] + 'px' 根据readingHoursHeight的数据动态设置bar的高度 {{ readingHours[i]...

本文讲介绍:hover、:active、:focus、:checked、Media Queries、JavaScript控制六种方法触发CSS3 transition，以及 transitionend 事件的使用。

CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局：什么是网格布局》和《[CSS Grid布局：浏览器开启CSS Grid Layout][链接])》）为这篇文章做足了铺垫。或许你想知道的是如何使用？各位看官不用太急，接下来通过各种实例向大家阐述CSS Gri...

上一篇《CSS Grid布局：什么是网格布局》中简单介绍了什么是CSS Grid Layout以及一些概念和术语，为后续学习和使用CSS Grid Layout做了一些铺垫。但浏览器对CSS Grid Layout到目前为止各浏览器厂端支持程度不一致，致使无法全面使用，就算是学习做一些测试示例都还需要做一些设置。那么在这篇文章中，将向大家介绍如何让...

CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中，被称为CSS Grid Layout Module。而我们较为熟悉的还是将其想像成网格或者栅格，也就是早期的960gs。不管是网格还是栅格或者现在的CSS Grid Layout Module，我想掌握这些技术对于我们将来在Web项目中实现布局只有好处没有坏处。那么从今天开始我将和大家一起探讨CSS...