我可能是个假的工程师——background-size属性

我记得在开头的css部分,我介绍过这个属性,可以设置背景图片的大小的。 但是前两天才知道,background-size属性是CSS3的属性,而不是CSS2的属性,因此兼容性也不是很好,IE678全都不支持这个属性。 后来询问了一下导师,得知这个属性在pc页面上一般是不使……

Web前端的知识之旅哟——网络性能优化(五十三)

感谢@Aimee 前端是一个庞大的体系,包括HTML、Css、Js、Image、Flash、Video、Audio等各种各样的资源。这就造成了前端的优化是非常复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么呢? 性能优化 前端优化的途径有很多,大致可以分为……

总结UC的一些问题(一)

1.UC浏览器的touch事件问题 正常的浏览器触发touch事件的顺序都是touchstart、touchmove、touchend,但是UC浏览器中是touchstart、touchmove。 touchend去哪了?黑人问号??? 经过查资料发现Android平台的UC浏览器中touchend事件只有在tap(即轻触后立即……

clear与margin-top

今天碰到的一个问题,研究了一下拿了出来。 我们都知道浮动模型的一般用途是实现一种文字环绕的效果: (这里是一个浮动的div与p标签) 但是,当我们想让文字从图片的中间开始而设置了一个margin-top的时候,却会发现浮动的div被p标签一起向下拉动了。 (……

Web前端的知识之旅哟—— CSS3多列布局与盒子模型(三十七)

多列布局 为了能在web页面中方便实现类似报纸、杂志那种多列排版的布局,w3c特意给css3增加了一个多列布局模块。 多列布局主要是columns属性,这是一个复合属性,包含column-width和column-count两个部分。 div.wrapper { width: 400px; border: 1px ……

Web前端的知识之旅哟—— CSS3动画(三十六)

二维动画——animation animation属性就是CSS3中的动画属性,默认的情况下是2d平面内的动画效果。这个属性必须配合@keyframes动画关键帧来使用。 animation是一个复合属性,它包括以下几个组成部分: animation-name:执行动画的keyframes的名字。 animation-……

Web前端的知识之旅哟—— CSS3图形变换与过渡(三十五)

transform属性 transform属性是让元素可以做一些图形变换的,这个属性有很多种类的值。 很多属性值都有x、y、z轴三个轴的值,这里的x是指沿着浏览器朝右边的x方向,y是沿着浏览器朝下的y方向,z则是浏览器指向我们用户的方向。 1.rotate 这个属性值是旋转的……

Web前端的知识之旅哟—— CSS3选择器(三十四)

CSS3中新增了很多选择器。 属性选择器 我们在前面的css选择器中学过这一个选择器。 E[attr=””] 我们通过这个写法就可以选择出属性attr的值为“”的元素,不过CSS3中给属性选择器新增了一点正则表达式的写法。 E[attr(符号)=””] 我们……

Web前端的知识之旅哟—— CSS3(三十三)

在开始CSS3之前我们要清楚一点的是:CSS3有很大的兼容性问题,IE9以下不兼容CSS3.0,IE10才开始全面支持CSS3。而由于浏览器厂商的不同,我们在使用CSS3的时候,有时候需要单独为每一种浏览器写兼容。 而兼容的方式就是在属性前面加上前缀: 前缀 浏览器 ……

Web前端的知识之旅哟——css背景图片和其他(八)

溢出打点 我们首先来介绍几个属性构成的文字溢出打点的功能。溢出打点就是当文字超过我们所规定的范围之后,后面的全部文字就会变成“…”的形式来出现。 • 单行文字溢出打点 单行文字的溢出打点需要三个属性来配合使用。 <div>       单行文字溢……

Top