[转载]闲聊CSS之关于clearfix--清除浮动

蓝飞 蓝飞 | 时间:2014-06-03, Tue | 5,495 views
前端开发 

一,什么是.clearfix

你只要到Google或者Baidu随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix"。

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
}
.clearfix {
    zoom: 1;
}

<div class="clearfix">
    <div class="floated"></div>
</div>

上面的代码就是.clearfix的定义和应用,简单的说下.clearfix的原理:

1、在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。

2、在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。

<div>
    <div class="floated"></div>
</div>
<div style="clear: both"></div>

(阅读全文…)

新浪微博表情插件——jQuery Sina Emotion 2.1发布

蓝飞 蓝飞 | 时间:2014-05-20, Tue | 15,966 views
前端开发 

##jQuery Sina Emotion

###这是什么?

一个用来方便快速地创建新浪微博表情选择对话框的jQuery插件。

###有何特点

  • 使用简单,一行代码即可创创建出表情选择对话框
  • 自带智能表情解析方法(但还是建议表情解析在服务端进行)
  • 兼容IE6+、Chrome、Firefox、Opera等各种浏览器

(阅读全文…)

互联网常见Open API文档资源

蓝飞 蓝飞 | 时间:2014-04-30, Wed | 21,922 views
前端开发 

所谓的开放API(OpenAPI)是服务型网站常见的一种应用,网站的服务商将自己的网站服务封装成一系列API(Application Programming Interface,应用编程接口)开放出去,供第三方开发者使用,这种行为就叫做开放网站的API,所开放的API就被称作OpenAPI(开放API)。

网站提供开放平台的API后,可以吸引一些第三方的开发人员在该平台上开发商业应用,平台提供商可以获得更多的流量与市场份额,第三方开发者不需要庞大的硬件与技术投资就可以轻松快捷的创业,从而达到双赢的目的,开放API是大平台发展、共享的途径,让开发者开发一个有价值应用,付出的成本更少,成功的机会更多。今天,OpenAPI作为互联网在线服务的发展基础,已经成为越来越多互联网企业发展服务的必然选择。下面我就列举一些常见网站服务的Open API文档资源索引。

(阅读全文…)

[HTML5]前端开发攻城师绝对不可忽视的五个HTML5新特性

蓝飞 蓝飞 | 时间:2014-03-25, Tue | 4,523 views
前端开发 

HTML5已经火了一段时间了,相信作为web相关开发工程师,肯定或多或少的了解和尝试过一些HTML5的特性和编程。还记得以前我们介绍过的HTML5新标签。 作为未来前端开发技术的潮流和风向标,HTML5绝对不容忽视。

在今天这篇技术分享文章中,我们将介绍几个HTML5的重要特性,能够帮助你提高整个web应用的使用体验和开发效率,相信大家会感兴趣的!

特性一:正则表达式

相信大家都会非常喜欢这个特性,无须服务器端的检测,使用浏览器的本地功能就可以帮助你判断电子邮件的格式,URL,或者是电话格式,防止用户输入错误的信息,通过使用HTML5的pattern属性,我们可以很方便的整合这个功能,代码如下:

<input type="email" pattern="[^ @]*@[^ @]*" value="">

特性二:数据列表元素

在没有HTML5的日子里,我们会选择使用一些JS或者知名的jQuery UI来实现自动补齐的功能,而在HTML5中,我们可以直接使用datalist元素,如下:

<form action="/server" method="post">
    <input list="jslib" name="jslib" >
    <datalist id="jslib">
        <option value="jQuery">
        <option value="Dojo">
        <option value="Prototype">
        <option value="Augular">
    </datalist>
    <input type="submit" value="完成" />
</form>

特性三:下载属性

HTML5的下载属性可以允许开发者强制下载一个页面,而非加载那个页面,这样的话,你不需要实现服务器端的一些功能来达到同样的效果,是不是非常贴心?

<a href="download_pdf.php" download="somefile.pdf">下载PDF文件</a> 

特性四:DNS的预先加载处理

要知道DNS的的解析成本很高滴,往往导致了网站加载速度慢。现在浏览器针对这个问题开发了更智能的处理方式,它将域名缓存后,当用户点击其它页面地址后自动的获取。

如果你希望预先获取NDS,你可以控制你的浏览器来解析域名,例如:

<link rel="dns-prefetch" href="//www.gbtags.com">
<link rel="dns-prefetch" href="//www.gbin1.com">
<link rel="dns-prefetch" href="//m.gbin1.com">
<link rel="dns-prefetch" href="//s.gbin1.com">

特性五:链接网页的预先加载处理

要知道链接能够在也页面中帮助用户导航,但是页面加载的速度快慢决定了用户体验的好与坏,使用如下HTML5的prefetch属性可以帮助你针对指定的地址预加载页面或者页面中的特定资源,这样用户点击的时候,会发现页面加载速度提高了。

<link rel="prefetch" href="http://www.gbtags.com/gb/users.htm" />
<link rel="prefetch" href="http://www.gbtags.com/gb/networks/themes/img/logo_small.jpg" />

或者可以使用prerender属性,这个属性能够帮助你提前加载整个页面,如下:

<link rel="prerender" href="http://www.gbtags.com/gb/search.htm" />

通过设置这个属性,登录极客社区后,极客搜索页面已经加载了,这样如果你需要搜索,页面会立刻加载,相信你的用户肯定喜欢访问这样的网站!

以上就是我们今天分享的五个实用的HTML5特性,希望大家喜欢。

转自:极客社区

[神器]使用ngrok快速地将本地Web服务映射到外网

蓝飞 蓝飞 | 时间:2014-02-20, Thu | 18,081 views
后台技术 

为什么要使用ngrok?

作为一个Web开发者,我们有时候会需要临时地将一个本地的Web网站部署到外网,以供它人体验评价或协助调试等等,通常我们会这么做:

  1. 找到一台运行于外网的Web服务器
  2. 服务器上有网站所需要的环境,否则自行搭建
  3. 将网站部署到服务器上
  4. 调试结束后,再将网站从服务器上删除

只不过是想向朋友展示一下网站而已,要不要这么麻烦,累感不爱╰(`□′)╯

有了ngrok之后,世界是如此的美好

  1. 首先注册并下载ngrok,得到一串授权码
  2. 运行命令ngrok -authtoken 你的授权码 80,80是你本地Web服务的端口,而之后ngrok会记住你的授权码,直接ngrok 80就OK了
  3. 你会得到一串网址,通过这个网址就可以访问你本地的Web服务了

获取ngrok

ngrok官网