FLEX 布局中的兼容性写法汇总

前言 随着浏览器的发展 FLEX 布局已经慢慢地走进了前端世界,虽然这样,但 FLEX 在实际的使用当中我们还得考虑下它的兼容性问题。即使现在已经是移动端横行霸道的时代,并且老版本的 IE 也已经慢慢退出历史的舞台,但浏览器之间也还是坚持着自己的一套方案。所以在这里有必要,也应该为给自己整理下 FLEX 布局当中的一些兼容性写法。虽然有很多编辑器也已经很智能,自带自动补全功能。 FLEX 兼容性之旅 ...

2017
09-10

CSS3 创建圆形进度条

前言 对于现如今越来越讲效率的互联网时代来说进度至关重要,而反应进度的进度条也就理所当然的成了主角,那么现在问题来了,这个进度条在前端中我们要怎么用代码画出来呢?不过在本文中我们只对圆进度条进行分析,因为直线式进度条比较简单。 SVG 实现 基本实现 基本 CSS 样式 *{ padding: 0; margin: 0; } .container{ width:130px; height:130px; margin:0 auto; } H...

2017
06-07

移动端一个像素问题解决方案

前言 移动端(手机等)已成为人们最常用的设备,对于我们这些前端开发人员来说,为了让用户用得爽,看得服务是不够的,因为你有时候还得听一个人的话,他就是传说中的设计师,比如:有时他会跟你讨论这样一个问题,为什么这条线看起来比我原型稿的粗一些,这也太粗了吧?诸如此类的话,让你连反驳的机会都没有,于是也只能暗暗的研究,找解决方法。 起因 这个原因真的不能怪你,但必需要你自己解决。生...

2017
05-21

CSS3 transform 你知多少?

transform 属于CSS3 的新属性。这个属性可以让我们实现很多以前只能通过 JavaScript 来实现的效果。比如元素的运动(缩放、旋转……)。所以这个新属性还是有必要用专门一篇文章来介绍它。毕竟它让我们通过了另一种方式让网页走向多姿多彩的世界。如果你觉得 transform 只能给你带来一点点便利,那么你就大错特错了,因为 transform 除了可以实现 2D 效果外,它还可以实现 3D 效果。现在让我们开...

2017
05-08

CSS3 clip-path 用法详解

前言 css3 的出现无疑是我们这些作为前端人的福音。因为它的出现让我们的在前端的世界变得更炫,多美,更多姿!接下来要给大家介绍的这个属性clip-path 就是一个可以让我们的页面更多姿多彩的 css3 属性。 clip-path 作用 正如前言中所说到的,可以让我们的页面变得多姿多彩,何为多姿,何为多彩呢? 多姿:可以让一个元素显示出不同的形式(如:正方形,圆形,长方形,椭员形,多边形……)...

2016
06-09

CSS 中改变横纵方向 writing-mode 属性

前言 Writing-mode属性,我从事前端这么久也还没看到过,更不用说上过了,是近在网上看到一篇关于 writing-mode属性的介绍,觉得不错,所以在这里也给大家整理分享出来。 其实这个属性IE5.5 版本的浏览器就已经支持了,但这个属性还是没流行起来,或者是说极少看到它的身影,因为在很长的一段时间里 FireFox,Chrome 浏览器都不支持wirting-mode属性。但随着前端技术的发展,各大主流浏览器也慢慢地开始...

2016
06-07

Animate.css 使用教程(一个强大的 CSS3 动画库)

前言 animate.css 是一个有趣,酷炫的,跨浏览器的动画库,你可以将它用于你的项目中。不管是主页,滑动切换,又或者是其它方面,你都可以通过它来制作出惊人的效果。 基本用法 引入CSS文件 这个对你来说应该再容易不过了,我相信你可能也已经对引入外部的CSS样式文件的代码以及快捷键也都背得滚瓜烂熟了。 你只需要在HTML文件的head标签中引入CSS样式文件,如下: <head> <link rel="styl...

2016
06-03

CSS3 Flex 弹性布局用法详解

什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性。 说明: 1.flex是display的一个属性值。与之相当应的还有一个是inline-flex。 2.设置了Flex布局后,子元素的float,clear,还有verticle-align属性都不起作用。 3.设置了display:flex属性的元素,称为Flex容器,他里面的所有子元素统称为容器成员,称为Flex项目。后面我们就使用Fle...

2015
11-26