Day: May 4, 2015
1. 方法一 ： CSS3
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
在前端制作的过程中会发现，一些文字/图片链接，或者一些input控件，在点击时会在周围出现虚线边框，一般会在火狐和IE浏览器下出现虚线框，谷歌下不会有。
这些虚线边框是作为对视觉设计的一种辅助，在不使用鼠标，而用键盘Tab键进行页面浏览时，会标示出当前所在的链接或控件的位置，便于浏览。这对那些视觉有障碍的人士来说更是必不可少的。
但是有些时候我们却不想使用它们，因为浏览器对虚线框的解析有差异，并且不规则，所以在视觉设计上反而成为了某种缺陷。所以这种时候，我们想要禁用这些虚线边框，使浏览者的视觉享受能够完美无瑕。
那么，如何去除这些点击时才会出现的虚线边框呢？
1. outline:none;
通常我们会这…
Read More
Metronic 是一套精美的响应式后台管理模板，基于强大的 Twitter Bootstrap 框架实现。Metronic 拥有简洁优雅的 Metro UI 风格界面，6 种颜色可选，76 个模板页面，包括图表、表格、地图、消息中心、监控面板等后台管理项目所需的各种组件。
在线演示 源码下载
特别感谢 Chairo 分享的源码下载！
原文链接：Metronic – 基于 Bootstrap 的响应式后台管理模板
编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
下载：metronic.bootstrap…
Read More
文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作，是非常好的产品使用体验。这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件，帮助你在网站中轻松添加输入框的自动完成和自动提示功能。
在这篇文章中，我们使用 jQuery 实现智能输入框光标的位置。它不需要图像，是使用纯粹的 CSS3 实现的，而且实时、准确，这意味着你在添加或删除文本的时候它会自动适应。使用事件代理机制实现，所以不用担心性能问题。
下载源码 在线演示
主要参数介绍：
serviceUrl：Ajax 请求的 URL；
lookup：本地数据数组；
minChars：触发自动提示的最小字符数；…
Read More
对于我来说，Web 前端开发是最酷的职业之一，因为你可以用新的技术发挥，创造出一些惊人的东西。唯一的问题是，你需要跟上这个领域的发展脚步，因此，你必须不断的学习，不断的前进。本文将分享能够帮助您快速掌握 HTML5 的实例教程，值得好好学习。
Measuring Page Load Speed with Navigation Timing
Navigation Timing 是用于精确测量网站性能的 JavaScript API。该 API 提供一种简单的方式来获得准确，详细的时序统计，页面导航和负载事件。它可现在能够在Internet Explorer 9，谷歌 Chrome 和 Firefox 中使用。本文介绍了该 API 以及如何利用…
Read More
HTML5 发展如火如荼，随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟，未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具，帮助你更高效的编写 HTML5 应用。
Initializr
Initializr 是制作 HTML5 网站最好的入门辅助开发工具，你可以使用提供的特色模板快速生成网站，也可以自定义，Initializr 会为你生成代码简洁的可定制的网页模板。
→ 访问 Initializr
HTML5demos
想知道你的浏览器是否支持 HTML5 Canvas 吗？想知道 Safari 是否可以运行简单的 HTML5 聊天客户端吗？HTML…
Read More
Google的 Chrome实验室 收 集了很多让人难以置信的基于 HTML5 Canvas 和 JavaScript 的实验项目，里面的例子都很独特，让人惊叹。我从未想过结合 HTML 和 JavaScript 能实现这么强大的效果。今天，本文与大家分享其中9个很棒的例子，为了有更好的效果，建议在Chrome浏览器中浏览。
Untangle
拖动蓝点，让所有线都不相交，看看你多久能解开？ 🙂
Z Type
一款太空射击游戏，基于ImpactJS游戏库开发。
Cube Out
模仿经典的益智游戏Blockout（三维俄罗斯方块），移动和旋转方块填补空白，完成一层后会自动消隐。
Bounce
一款jav…
Read More
图片轮播是网站中的常用功能，用于在有限的网页空间内展示一组产品图片或者照片，同时还有非常吸引人的动画效果。本文向大家推荐12款实用的 jQuery 图片轮播效果插件，帮助你在你的项目中加入一些效果精美的图片轮播效果，希望这些插件能够帮助到你。
Nivo Slider
首先推荐的这款插件号称世界上最棒的图片轮播插件，有独立的 jQuery 插件和 WordPress 插件两个版本。
目前下载量已经突破 1,800,000 次！jQuery 独立版本的插件主要有如下特色：
✓ 16个独特的过渡效果
✓ 简洁和有效的标记
✓ 加载参数设置
✓ 内置方向和导航控制
✓ 压缩版本大小只有12KB
✓ 支持链接图像…
Read More
在网上冲浪的时候碰到404错误页面是非常令人沮丧的，随后的一两秒内如果没有什么吸引你的注意力的话，我敢肯定你会离开网站，再也不会回来。 因此，很多网站都会设计一个新颖的错误页面，以吸引用户继续浏览其它的内容。这里收集了45个非常有创意的404错误页面设计作品，一起欣赏：）
1. Batman
2. Godzilla
3. Oroza
4. Ferdaze
5. Suspended Animations
6. War Hammer
7. Pattern Tap
8. Dina sour Death Point
9. Zombie By Invader
10. Surfing-on-Static
11. Jhuskisson…
Read More
jQuery 是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择，它可以帮助你在项目中加入漂亮的效果，其中之一就是幻灯片效果的实现，这是一种在有限的网页空间内展示系列项目时非常好的方法。
今天这篇文章要给大家分享的是60款很酷的 jQuery 幻灯片插件，相信里面一定会有你喜欢的。
Cloud Carousel (演示 | 下载)
ShineTime (演示 | 下载)
Nivo Slider (演示 | 下载)
Interactive Photo Desk (演示 | 下载)
Beautiful Photo Stack Gallery with jQuery and CSS3 (演示 | 下载)…
Read More
英文原文 http://odiseo.net/javascript/front-end-optimizations-you-can-do-right-now-on-your-existing-code
强烈建议各位Web前端开发人员都要“真正”去学习Javascript并且掌握基本的DOM知识。诚然我也不得不赞同，不少基于Javascript特性的小把戏和小技巧根本就不会带来终端用户能明显觉察到的性能提升。话虽如此，我会在这篇文章里分享一些优化技巧，你可以马上在代码里使用这些技巧从而让程序跑的更快。而且从今以后，每当在项目里使用Javascript的时候你都应该想到并实践这些优化。
精明的使用选择器…
Read More
最近项目上用到HTML5的geolocation用于定位，用Chrome和手头的手机测试好好的功能，到终端用户那里反馈一些手机不能定位，最 后确定出是部分三星、摩托的部分国行Android手机“阉割”了谷歌GMS服务包，导致HTML5的geolocation无法使用wifi和基站定位 服务导致。
值得一提的是前期在stackoverflow和google groups里搜到对症描述的解决方案（貌似Android 2.*或者三星自身的问题）全部失效，因为介是个“中国特色”的问题-_lll
首先介绍下HTML5的Geolocation功能。通常情况下，我们是先判断浏览器是否支持geolocation, 如果不支…
Read More
