摘要: 根据屏幕的宽高,弹框永远在页面垂直水平居中。 页面布局如下: <!--按钮--> <div class="checkbox"> <a href="javascript:0;" class="cd-popup-trigger3">播放</a> </div> <!--弹框--> <div class=" 阅读全文
posted @ 2017-04-30 18:16 小芳姑娘~~ 阅读(115) 评论(0) 推荐(0) 编辑
摘要: transform 属性向元素应用 2D 或 3D 转换,允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)或倾斜(skew)。 浏览器支持情况: Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Intern 阅读全文
posted @ 2017-04-19 14:45 小芳姑娘~~ 阅读(108) 评论(0) 推荐(0) 编辑
摘要: 在图片比较多的页面中,如果一次性把所有的图片全部加载出来,不仅加载速度慢,还会对服务器造成不小的压力,也浪费了带宽(不是每个用户都会从头至尾看完所有页面内容),那么在图片比较多的情况下,我们就可以采取图片懒加载的形式来解决这个问题。 jq中有一个lazyload.js的插件,方便好用,下面简单的介绍 阅读全文
posted @ 2017-04-19 11:37 小芳姑娘~~ 阅读(1313) 评论(0) 推荐(0) 编辑
摘要: <div> <a href="javascript:;"></a></div> a{ text-decoration: none; width: 30px; height: 30px; background: #000; border-radius: 50px; position: absolute 阅读全文
posted @ 2017-04-17 17:27 小芳姑娘~~ 阅读(173) 评论(0) 推荐(0) 编辑
摘要: 目前浏览器都不支持 @keyframes 规则,Firefox 支持替代的 @-moz-keyframes 规则,Opera 支持替代的 @-o-keyframes 规则,Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。 通过 @keyframes 规则,能够 阅读全文
posted @ 2017-04-17 15:51 小芳姑娘~~ 阅读(177) 评论(0) 推荐(0) 编辑
摘要: 1.盒子没有固定的宽和高 方法1.Transforms变形 这是比较简单的方法,不仅能实现绝对居中的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%) 必须加上top: 50%; left: 50%。但是不兼容IE8以及以下,可能干扰其他tra 阅读全文
posted @ 2017-04-17 14:59 小芳姑娘~~ 阅读(166) 评论(0) 推荐(0) 编辑
摘要: 在现实工作中,很多时候会有一些比较奇怪的需求,但即使是奇怪,但还是需要去实现。最近,在工作中,遇到一个需求,是这样的: 1、标题只有一行文字的时候,整个标题在一个div中需要垂直水平居中,文字也是居中对齐 2、当标题超过一行的时候,那么标题在这个div中需要垂直水平居中,但是文字变成了左对齐 根据如 阅读全文
posted @ 2017-04-11 21:16 小芳姑娘~~ 阅读(2378) 评论(0) 推荐(0) 编辑