海阔天空

有时候我们业务中会遇到需要字体图标的场景比如在不同的地方图标显示的颜色不同，这个时候使用字体图标就很适合，这个场景我遇到了几次。使用字体图标的两种方式：1.让设计给出图标的svg文件，上传到iconfont上，然后再下载就可以和使用iconfont方式一样去使用了。2.通过css的mask属性直接引入svg文件 再通过样式改变图标颜色和大小a)法一<div class="icon></div>.icon { width: 16px; heigh

网格布局（Grid）是最强大的 CSS 布局方案。 ——阮一峰阮大神最近项目中遇到了一些css问题，通过grid布局就能很好的解决，之前grid布局没有用过也不怎么了解，所以在解决问题的过程中特地去学习了一下，主要看了阮大神的文章。先说说我项目的布局问题吧，就是类似于下图的这种，每块内容宽度不固定，pc上的时候3等分 ，笔记本上就2等分，每块之间需要有一定的间距。这个时候使用...

通过 background-repeat属性可以给插入的背景图片设置是否要重复，及按怎样重复。该属性可能的值值描述repeat默认。背景图像将在垂直方向和水平方向重复。repeat-x背景图像将在水平方向重复。repeat-y背景图像将在垂直方向重复。no-repeat背景图像将仅显示一次。inherit规定应该从父元素继承 background-repeat 属性的设置。例：.bird {   ...

元素水平垂直居中的需求是比较常见的，在此总结一下。一、纯文字实现垂直居中（文字水平居中 + line-height: height）html结构： <div class="text">文字文字<div>css样式： .text {text-align: center; height: 20px; line-height: 20px}也可以用下面的方法，但个...

第一个：CSS3-html5 demo在线测试案例感谢酷站的博主分享：http://www.zaole.net/demo/ 该酷站包含了：螺旋式Loading加载 谷歌点击翻牌效果 链接下划线虚线 链接提示效果 links新定义 独特的网站链接样式大全 NAV链接样式 链接悬停效果 手机屏幕锁定模式 葡萄形状menu菜单 按钮悬停效果 SVG菜单+关闭按钮 ...

有时候我们不用html5自带的视频/音频的控件，需要自定义， 这个时候可能就需要用到一些audio/video属性值。我们有个业务场景需要进入页面就获取音频的总时长， 但一直无法获取到，只有和页面产生交互才能获取，折腾了一段时间，总算解决了。 当音频/视频处于加载过程中时，会依次发生以下事件：loadstartdurationchangeloadedmetadataloadeddata...

有些业务场景，当用户多次操作失败之后会增加图片验证码的操作；又或者在登录操作的时候加上图片验证码，防止恶意暴力破解密码。那前端该如何处理呢？其实很简单，有两种方式，一个是通过后端，一种是前端自己弄。1.后端生成图片验证码，前端直接渲染就可以了，后端可以返回图片验证码的url链接，也可以直接返回图片文件，这里面有个坑，当后端直接返回图片的时候我们前端如何渲染呢？折腾了一会儿，网上也搜了各种方法多不是...

固定图片宽高比是项目中比较常见的需求，这样可以使得图片在不同分辨率屏幕上保持相同的的比例从而不会变形。实现起来很简单。<div class="wrap"> <img src="xxx.png" class="img"/></div>/**父元素通过通过padding撑开相同宽高比的内容区域*padding的百分比值是相对该元素的宽度计算的...

此篇记录css选择器相关，后期会持续更新。1. ele:nth-of-type() 和 ele:nth-child()选择器比较不同点：ele:nth-of-type(n)是指ele的父元素下第n个ele元素ele:nth-child(n)是指ele的父元素下第n个子元素且这个元素为ele，若不是，则选择失败相同点：两者的值都可以是 数字，2n, 3n .. old, even...