2016年1月29日

grid 布局 CSS3

摘要: display:grid 是一种新的布局方式,旧的布局方式通常有副作用,例如float(需要额外修复浮动)或者inline-block(两个元素之间的空格问题) 把父元素定义为grid,就像表格一样,然后就可以给他的子元素定义各自占的行和列 .area { display: -ms-grid; /* 阅读全文

posted @ 2016-01-29 16:08 迷茫小飞侠 阅读(734) 评论(0) 推荐(0) 编辑

响应式图片分界点思考

摘要: 最好是具体图片具体分析: 这图片有很多视觉上的差异,为了保持这图的颜色的变化和纹理,应该分为多个大小,不然直接压缩容易失真 断点宽度高度文件大小 1 320 213 25K 2 453 302 44K 3 579 386 65K 4 687 458 85K 5 786 524 104K 6 885 阅读全文

posted @ 2016-01-29 15:51 迷茫小飞侠 阅读(221) 评论(0) 推荐(0) 编辑

响应式图片

摘要: 1、尽可能使用矢量图(svg)或者字体图标 2、鼓励人们上传最高质量的图片,屏幕向着高分辨率发展,方便以后改版 3、自动修改图片大小和压缩服务,最好能通过URL参数修改图片大小 (webP) 4、当同一张图片缩小看可以看不清楚,例如 这个时候应该显示下面这种 art direction use ca 阅读全文

posted @ 2016-01-29 15:50 迷茫小飞侠 阅读(170) 评论(0) 推荐(0) 编辑

h5 动画页面

摘要: 伪元素上就不要做动画了,页面果然应该做一个测试一个啊 拿到设计稿一开始就先看看这个设计稿的布局,有一些是从页面顶部到底部都有效果的,这个时候就要考虑在 iPhone4 这样屏幕不够高的设备上如何保证页面完整呈现;或者在不影响交互的情况下,隐藏哪些元素。有的时候页面上元素比较集中,这个时候就要考虑在 阅读全文

posted @ 2016-01-29 09:12 迷茫小飞侠 阅读(803) 评论(0) 推荐(0) 编辑

angular

摘要: http://docs.ngnice.com/guide/ http://angularjs-doc.qiniudn.com/docs/api 英语镜像 它的创新之处在于,通过数据绑定和依赖注入减少了大量代码,而这些都在浏览器端通过JavaScript实现,能够和任何服务器端技术完美结合。 1、双向 阅读全文

posted @ 2016-01-29 09:09 迷茫小飞侠 阅读(185) 评论(0) 推荐(0) 编辑

自动化测试 笔记

摘要: PhantomJS下载直接使用 ,它本质上是一个基于webkit内核的无界面浏览器,并可使用JavaScript或CoffeeScript进行编程。由于没有界面,它的使用就有点像curl, lynx之类的命令行式文本浏览器。但PhantomJS远不是文本浏览器那么简单,由于它是基于webkit内核的 阅读全文

posted @ 2016-01-29 09:09 迷茫小飞侠 阅读(243) 评论(0) 推荐(0) 编辑

transform 各种影响

摘要: 1、提升元素的z-index层级,下面这个例子会让前面的图片显示在上面,一般来说应该是后面的覆盖前面图片的 <img src="mm1" style="-ms-transform:scale(1);transform:scale(1);"><img src="mm2" style="margin-l 阅读全文

posted @ 2016-01-29 09:08 迷茫小飞侠 阅读(692) 评论(0) 推荐(0) 编辑

微信转发相关脚本

摘要: (function(){ var imgUrl = "http://sunnyzhen.github.io/public/img/sunny.jpg"; var lineLink = location.href; var descContent = ""; var shareTitle = docu 阅读全文

posted @ 2016-01-29 09:07 迷茫小飞侠 阅读(1282) 评论(0) 推荐(0) 编辑

伪元素生成空格与中文字符对齐布局

摘要: .half { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } .full { *zoom: expression( this.runtimeStyle['zoom'] = '1', this. 阅读全文

posted @ 2016-01-29 09:06 迷茫小飞侠 阅读(638) 评论(0) 推荐(0) 编辑

css3 滚动条出现 页面不跳动

摘要: .wrap-outer { margin-left: calc(100vw - 100%); } .wrap-outer { padding-left: calc(100vw - 100%); } 首先,.wrap-outer指的是居中定宽主体的父级,如果没有,创建一个(使用主体也是可以实现类似效果 阅读全文

posted @ 2016-01-29 09:05 迷茫小飞侠 阅读(623) 评论(0) 推荐(0) 编辑

导航