css
css前端知识,技巧,心得,经验。
办公研究所
有点意思,你懂的
展开
-
webpack 构建多页面应用初探
如何使用webpack构建多页面应用,这是一个我一直在想和解决的问题。网上也给出了很多的例子,很多想法。猛一看,觉得有那么点儿意思,但仔细看也就那样。使用webpack这个构建工具,可以使我们少考虑很多的问题。我们常见的单页面应用只有一个页面,它考虑问题,解决问题围绕着中心化去解决,因此很多麻烦都迎刃而解。如果你使用过vue.js,那么想必你一定用过vue-router,vuex,它们就是典型的中心化管理模式,当然还有很多,这里不一一列举了。而多页面应用,我们不能再按照中心化模式的路走了,因为行翻译 2020-07-23 14:41:22 · 238 阅读 · 0 评论 -
PostCSS_自动处理css3属性前缀
什么是属性前缀?为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。例如:transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari 和 Chrome */-o-transition: width 2s; /* Opera */ 使用插件来翻译 2020-07-22 23:23:18 · 421 阅读 · 0 评论 -
使用html+css+js实现简易计算器
使用html+css+js实现简易计算器,效果图如下:html代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible.翻译 2020-07-22 23:12:29 · 742 阅读 · 1 评论 -
大厂前端带来css3动画transition的使用和介绍全新认识动画
CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体现出一种动画过程。在transition出现之前css是没有过渡效果的(时间轴),也就是所有的属性的变化都是即时完成。transition是由4个属性的合体简写:它们分别是:ransition-property – 过渡的CSS属性的名称,例如:opacity。transition-durati.转载 2020-05-24 11:20:56 · 253 阅读 · 0 评论 -
带你认识网站图片img懒加载和预加载的区别
懒加载什么是懒加载?懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。为什么要使用懒加载?很多页面,内容很丰富,页面很长,图片较多。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。懒加载的原理是什么?转载 2020-05-23 12:47:18 · 402 阅读 · 0 评论 -
整理一下CSS最容易躺枪的二十规则,大家能躺中几条?
整理一下CSS最容易躺枪的二十规则,大家能躺中几条?转载:API中文网一、float:left/right 或者 position: absolute 后还写上 display:block?二、认为布局就是 Float,所有的地方都是 Float,全家都是 Float!三、认为 px 是一个绝对单位(px 是相对单位)整个页面都是 px,全家都是 px;四、查看源码,满屏都是 div 的就不多说了吧……;五、段落不会用 P 只会用 br 和 div;六、多 class 症(病.转载 2020-05-23 12:09:50 · 205 阅读 · 0 评论