12 2014 档案

启动mongodb bat
摘要：mongod -dbpath "d:\mongodb\data" 阅读全文
posted @ 2014-12-31 15:51 zhishaofei3 阅读(178) 评论(0) 推荐(0)
判断是否支持WebP
摘要：PC端，触屏版：前端JS方案——利用img标签加载一张base64的WebP图片，在img标签的onload事件中判断该图片是否具有宽高的属性，若有表示支持webP，若没有表示不支持webP。后台判断方案——判断浏览器请求头Accept是否支持WebP，返回是否支持的标示给前台。以上两种方案中，前端... 阅读全文
posted @ 2014-12-29 12:32 zhishaofei3 阅读(5213) 评论(1) 推荐(0)
前端攻略系列(一) - 前端各种优化(保证持续更新)
摘要：前端性能优化1. 请减少HTTP请求 基本原理： 在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。 一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务... 阅读全文
posted @ 2014-12-29 09:56 zhishaofei3 阅读(314) 评论(0) 推荐(0)
impress.js初体验
摘要：概述 如果你已经厌烦了使用PowerPoint制作PPT，那么impress.js是一个非常好的选择，用它做的PPT更加直观，效果也非常的不错。装X是需要一定代价的，不过如果你是个前端爱好者那么一切就没问题了。当然如果你能勉强明白HTML和CSS也没问题，看看这篇文章 + 一点点实践（把官网上的例... 阅读全文
posted @ 2014-12-29 09:30 zhishaofei3 阅读(296) 评论(0) 推荐(0)
jsonp原生js代码示例
摘要：/* mightygumball.js *//* * get the content of a JSON file using JSONP * update every 3 seconds. * */var lastReportTime = 0;window.onload = init;functi... 阅读全文
posted @ 2014-12-25 10:24 zhishaofei3 阅读(478) 评论(0) 推荐(0)
rgba()和opacity的使用
摘要：rgba()表示 红 绿蓝 alpha ,W3C指在原有的rgb颜色模型之后增加了 “alpha”参数，“可以让制定的颜色透明化”（rgb()上扩展的，其只可以设置颜色，而不能使设置的颜色透明化）例子：rgba(55,146,179,.5) ;//rgb值为“55,146,179”，.5使设定的rg... 阅读全文
posted @ 2014-12-19 15:05 zhishaofei3 阅读(197) 评论(0) 推荐(0)
letter-spacing+first-letter实现按钮文字隐藏
摘要：本文地址：http://www.zhangxinxu.com/wordpress/?p=3557一、文不在长，有货则灵图片式按钮的文字隐藏看来是大家都比较关注的一个问题（分享讨论、微博转发等可见一斑），text-indent负值为最常用方法，然问题有三：较大的负值有性能问题，例如新浪/腾讯微博提交按... 阅读全文
posted @ 2014-12-19 14:02 zhishaofei3 阅读(308) 评论(0) 推荐(0)
Android利用Fiddler进行网络数据抓包
摘要：主要介绍Android及IPhone手机上如何进行网络数据抓包，比如我们想抓某个应用(微博、微信、墨迹天气)的网络通信请求就可以利用这个方法。相对于tcpdump配合wireshark抓包的优势在于：(1)无需root (2)对Android和Iphone同样适用 (3)操作更简单方便(第一次安装配... 阅读全文
posted @ 2014-12-18 13:44 zhishaofei3 阅读(180) 评论(0) 推荐(0)
CSS3 Columns:比table更好用的分列式布局方法
摘要：CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin... 阅读全文
posted @ 2014-12-18 11:36 zhishaofei3 阅读(385) 评论(0) 推荐(0)
应不应该使用inline-block代替float
摘要：CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗?浮动通常表现正常，但有时候搞起来会很纠结。特别是处理内部容器中的浮动，比如对一排图片使用浮动后对齐出现问题。Inline-block是我们的另一种选择。使用... 阅读全文
posted @ 2014-12-18 11:18 zhishaofei3 阅读(217) 评论(0) 推荐(0)
jQuery选择器对应的DOM API ——选择元素
摘要：英文原文：http://blog.garstasio.com/you-dont-need-jquery/selectors/愚人码头注：原作者的写这文章的意图是让我们抛弃jQuery,You Don’t Need jQuery!提倡我们使用原生的JavaScript，所以收集整理了jQuery语法对... 阅读全文
posted @ 2014-12-18 10:54 zhishaofei3 阅读(328) 评论(0) 推荐(0)
去除inline-block元素间间距的N种方法
摘要：一、现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子： 间距就来了~~我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题：.space a { display: inline-bloc... 阅读全文
posted @ 2014-12-18 09:46 zhishaofei3 阅读(148) 评论(0) 推荐(0)
CSS清浮动处理（Clear与BFC）
摘要：在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼1 浮动带来布局的便利，却也带来了新问题 1 2 3 4 5 Clear float 6 23 24 25 26 27 ... 阅读全文
posted @ 2014-12-18 09:37 zhishaofei3 阅读(224) 评论(0) 推荐(0)
多行文本省略
摘要：.artist .mod .info .content .abstract:after { content: '...'; position: absolute; right: 0; display: block; width: 21px; height: 20px; t... 阅读全文
posted @ 2014-12-17 19:09 zhishaofei3 阅读(117) 评论(0) 推荐(0)
webkit webApp 开发技术要点总结
摘要：如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ：1. viewport：也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是... 阅读全文
posted @ 2014-12-17 16:01 zhishaofei3 阅读(134) 评论(0) 推荐(0)
英文单词断行问题：CSS中word-break、word-wrap以及hyphens的兼容性和区别
摘要：CSS中一提到单词断行，最先映入脑海的肯定是word-break和word-wrap这两条属性。但对于这两条属性到底有什么区别，兼容性如何，我一直都概念模糊。今天抽空把它们以及CSS3中新加入的断行属性之间的区别和作用理理清楚，做一下笔记。在英文段落中有时会碰到一些很长的单词，这些单词的长度超出容器... 阅读全文
posted @ 2014-12-17 15:59 zhishaofei3 阅读(2886) 评论(0) 推荐(0)
关于Apple设备私有的apple-touch-icon属性详解
摘要：以前我们用过favicon在浏览器给网站进行身份标识，用法如下：[html]view plaincopy现今移动设备越来越多，苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏... 阅读全文
posted @ 2014-12-17 15:16 zhishaofei3 阅读(480) 评论(0) 推荐(0)
CSS3的REM设置字体大小
摘要：在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EM优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是，仍然有不同的利弊，使各种技术都不太理想，... 阅读全文
posted @ 2014-12-17 14:37 zhishaofei3 阅读(103) 评论(0) 推荐(0)
js函数在线手册
摘要：http://www.hi-docs.com/Javascript.html 阅读全文
posted @ 2014-12-12 23:55 zhishaofei3 阅读(370) 评论(0) 推荐(0)
Chrome 控制台新玩法-console显示图片以及为文字加样式
摘要：有兴趣的同学可以文章最后的代码复制贴到控制台玩玩。Go for Code在正常模式下，一般只能向console 控制台输出简单的文字信息。但为了把信息输出得更优雅更便于阅读，除了cosole.log()方法外还可以调用 cosole.warn() 来输出警告信息，在控制台中出来的效果如下：在输出信息... 阅读全文
posted @ 2014-12-12 23:47 zhishaofei3 阅读(372) 评论(0) 推荐(0)
HTML5 <details> 标签
摘要：HTML5 中新增的标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。用法一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jQuery手风琴插件差不多。其大致写法如下：1234567891011121314Google Nexus 6商品详情... 阅读全文
posted @ 2014-12-12 23:45 zhishaofei3 阅读(1478) 评论(0) 推荐(0)
CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
摘要：Triangle Up1234567#triangle-up {width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-bottom:100pxsolidred;} Tri... 阅读全文
posted @ 2014-12-12 22:55 zhishaofei3 阅读(168) 评论(0) 推荐(0)
CSS与HTML5响应式图片
摘要：随着Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的Retina屏幕显示依然清晰，曾经一度困扰着网页开发者，好在CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢？什么是响应式图片？响应式图片是指：用户代理根据输出设备的分辨率不同加载... 阅读全文
posted @ 2014-12-12 14:07 zhishaofei3 阅读(645) 评论(0) 推荐(0)
webkit内核浏览器的CSS写法
摘要：-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明-webkit-user-select: none; 设置为无法选择文本-webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上加... 阅读全文
posted @ 2014-12-12 14:03 zhishaofei3 阅读(223) 评论(0) 推荐(0)
CSS中zoom和scale的区别
摘要：zoom和scale这两个东西都是用于对元素的缩放，但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角，而scale默认是中间位置，可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。运行 第一个测试中只设置了scale，... 阅读全文
posted @ 2014-12-11 09:52 zhishaofei3 阅读(311) 评论(0) 推荐(0)
css3 进度条
摘要：http://www.css88.com/demo/css3-progress-bars 阅读全文
posted @ 2014-12-05 13:31 zhishaofei3 阅读(125) 评论(0) 推荐(0)
学习CSS了解单位em和px的区别
摘要：这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章，题目有点吓人，但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与em之间的关系和特点，看过以后确实收获很大。平时都是用px来定义字体，所以无法用浏览器字体放大的功能，而国外大多数网站都可以在IE下使用。因为1、IE无法调... 阅读全文
posted @ 2014-12-05 09:48 zhishaofei3 阅读(146) 评论(0) 推荐(0)