月份: 2015-01

图片下面出现空白像素的问题解决

图片下面出现空白像素的问题解决

在进行页面的DIV+CSS排版时,浏览器中的图片元素img下出现多余空白的问题绝对是常见的,对于该问题的解决方法也是“见机行事”,根据原因的不同要用不同的解决方法,这里把解决直接把解决img图片布局下边的多余空白的BUG的常用方法归纳,供大家参考。

推荐方法 1 和 2 ,最喜欢的还是方法 1.

1、将图片转换为块级对象可去掉下边空白

即,设置img为:

display:block;

在本例中添加一组CSS代码:

img {display:block;}

2、设置图片的垂直对齐方式

即设置图片的vertical-align属性为“top,text-top,bottom,text-bottom”也可以去掉下边空白。CSS代码:

img {vertical-align:top;}

3、设置父对象的文字大小为0px ,此方法不推荐。

即,在父对象css中添加一行:

font-size:0;

可以解决空白问题。但这也引发了新的问题,在父对象中的文字都无法显示。就算文字部分被子对象括起来,设置子对象文字大小依然可以显示,但在CSS效验的时候会提示文字过小的错误。

4、改变父对象的属性

如果父对象的宽、高固定,图片大小随父对象而定,那么可以设置:

overflow:hidden;

来去掉空白。如本例中可以在父对象css中添加以下代码:

width:88px;height:31px;overflow:hidden;

5、设置图片的浮动属性也可去掉空白

即在本例中增加一行CSS代码:

img {float:left;}

如果要实现图文混排,这种方法是很好的选择。但如果容器里就一个img标签,他浮动后,造成父元素内部空 没有高度。

6、取消图片标签和其父对象的最后一个结束标签之间的空格。

这个方法要强调下,在实际开发中该方法可能会出乱子,因为在写代码的时候为了让代码更体现语义和层次清晰,难免要通过IDE提供代码缩进显示,这必然会让标签和其他标签换行显示,比如说DW的“套用源格式”命令。所以说这个方法可以供我们了解出现BUG的一种情况,具体解决图片下边空白方案的还得各位见招拆招了。 

10款Github上最火爆的「国产」开源项目

衡量一个开源产品好不好,看看产品在Github的Star数量就知道了。由此可见,Github已经沦落为开源产品的「大众点评」了。

一个开源产品希望快速的被开发者知道、快速的获取反馈,放到Github上面就可以了。

Github上有无数大牌产品:Bootstrap、JQeury、bower、Nginx……可惜都是歪果人搞出来的,他们都有一个共同的特点:全英文。

中国人普遍认为,英语和高数是这个世界上最难的学科。即使这个国家每天都向美国欧洲澳洲等国家地区输出大量的中国人,并且一直在中学奥数上保持让人抓狂的奖牌截获率。

于是就有了这篇文章的出发点。说实话,在动手之前我并不自信这篇文章能写出多少东西。毕竟一直以来中国人都是以「腼腆」著称,中国传统文化也不鼓励(我觉得说「打压」可能比较贴切)分享,而是鼓励藏着腋着。但是当我真正开始动手之后,所有顾虑完全取消了。

感谢Github,让我们有了一个优秀的共享平台,享受思想碰撞、参与优秀项目的激情。下面我跟广大的程序猿们,分享一下Github上最热的10款国产开源软件。(本人纯手动计算,按照星数点评,有些熟悉就说的多,不熟悉就少说。失误之处你给我指出来,我下次补上)

——————————————————————————–

Echarts

Echarts 是基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。

所属公司:百度
Star:5204
https://github.com/ecomfe/echarts
提交时间:5/26/2013
优势:echarts提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、和弦图以及力导向布局图,同时支持任意维度的堆积和多图表混合展现。
劣势:在功能上比hightchars还是稍弱。对手机浏览器支持不是十分理想。

——————————————————————————–

Cocos2d-x

触控科技旗下产品,国内最火的2D游戏引擎,国内市场超过60%,国外也有非常好的市场占有率。跨平台框架,主业是2D游戏引擎,兼职有互动电子图书、Demo演示以及其他图形化应用。主要开发语言是C++。

所属公司:触控科技
Star:5050
https://github.com/cocos2d/cocos2d-x
提交时间:6/4/2010
优势:社区发达,便于初学者上手和解决问题;性能高体积小;后续开发难度曲线比较平滑;spine、TexturePacker、Cocostudio等工具让引擎方便的处理各种资源和UI问题。开发者很方便的研发出适合自己项目的编辑器。
劣势: Cocos2d-x兼容性会差一些,如果团队更改了引擎代码,则可能导致不同的环境不兼容。上手难度相对较高。

——————————————————————————–

pomelo

pomelo 是由网易开发的基于node.js开发的高性能、分布式游戏服务器框架, 也可作为高实时web应用框架。

所属公司:网易
Star:4136
https://github.com/NetEase/pomelo
提交时间:11/18/2012
优势:开发高实时web应用也合适, 而且伸缩性比其它框架好。pomelo拥有完善的独立网站,Mailing List,文档社区一应俱全。提供多个开发案例,而且还有多种客户端代码。
劣势:不适合大型的MMO rpg游戏,多人在线,尤其是3D网游。

——————————————————————————–

SeaJS

SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。

所属公司:阿里巴巴
Star:3503
https://github.com/seajs/seajs
提交时间:12/26/2010
优势:可以加载js,tpl,css。采用模块级管理,代码易于维护,管理,复用,以及并行开发。减少代码的锁冲突。
劣势:模块合并麻烦。需要配套使用SPM工具,JS的打包和管理工具。文档较混乱。

——————————————————————————–

Tengine

Tengine是由淘宝网发起的Web服务器项目。它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性。

所属公司:阿里巴巴
Star:2419
https://github.com/alibaba/tengine
提交时间:11/27/2011
优势:Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到了很好的检验。代理存活检查较好。动态模块加载(DSO)支持。输入过滤器机制支持。Web应用防火墙的编写更方便。动态脚本语言Lua支持。扩展功能非常高效简单。显示对运维人员更友好的出错信息,便于定位出错机器。
劣势:希望更加稳定吧。

——————————————————————————–

Amaze UI
Amaze UI 是基于社区开源项目构建的一个跨屏前端框架,以移动优先(Mobile first)为理念,从小屏到大屏,最终实现所有屏幕适配,适应移动互联潮流。用户可以在 Amaze UI 的基础上进行二次开发。

所属公司:云适配
Star:2125
https://github.com/allmobilize/amazeui
提交时间:8/10/2014
优势:Amaze UI以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流;组件丰富,模块化,Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件,更有 17 款包含近 60 个主题的 Web 组件;相比国外框架Bootstrap,Amaze UI 也很关注中文排版,根据用户代理调整字体,实现更好的中文排版效果,兼顾国内主流浏览器及 App 内置浏览器兼容支持,同时对微信、百度、微博等广义上的WebView同样完美兼顾,本地化支持做的很不错;轻量级,高性能,Amaze UI 面向 HTML5 开发,使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让 Web 应用更快速载入。
劣势:相比国外Bootstrap等成熟的开源项目, Amaze UI的开发者社区还比较小, 著名案例也比较少。

——————————————————————————–

fastjson

fastjson 是一个性能很好的 Java 语言实现的 JSON 解析器和生成器。

所属公司:阿里巴巴
Star:1700
https://github.com/alibaba/fastjson
提交时间:7/31/2011
优势:fastjson有效提升parse速度,支持http://json.org的标准。支持各种JDK类型。包含基本类型、JavaBean、Collection、Map、Enum、泛型等。支持循环引用。
劣势:本地化做的还不够好。

——————————————————————————–

Kissy

Kissy 是一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。

所属公司:阿里巴巴
Star:1532
https://github.com/kissyteam/kissy
提交时间:7/10/2012
优势:跨终端、模块化、高性能、使用简单的 JavaScript 框架。除了完备的工具集合如 DOM、Event、Ajax、Anim 等,它还提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的 JavaScript 框架,KISSY 为移动终端做了大量适配和优化,让你的程序在全终端均能流畅运行。
劣势:你可能需要重新学习Kissy API。

——————————————————————————–

DPark

DPark 是 Spark 的 Python 克隆,是一个Python实现的分布式计算框架,可以非常方便地实现大规模数据处理和迭代计算。

所属公司:豆瓣
Star:1142
https://github.com/douban/dpark
提交时间:10/9/2011
优势:DPark对底层依赖较轻,不使用Java语言不受JVM拖累,启动任务快。有效的减少Map和Reduce人物之间传递的数据,适合反复迭代的机器学习场景。
劣势:推出时间虽然不短了,但还不是很成熟。扩展性不是很好。

——————————————————————————–

Mars

腾讯移动Web前端知识库。

所属公司:腾讯
Star:934
https://github.com/AlloyTeam/Mars
提交时间:7/21/2013
优势:搭建在Github上便于下载和维护;有腾讯背景,拥有大量实战实例。
劣势:目前文档内容太少,不够详细。

IT男最不解风情的12个瞬间,欲哭无泪!

1.化完妆问IT男:“我漂不漂亮?”IT男说:“亲爱的,闭眼别动。”我羞涩地闭上眼等待他的kiss,结果他说:“这里有个脏东西。”然后撕下了我的双眼皮贴。。

2.感冒了很难受,我闷在被窝里给男朋友发短信”我感冒了”并决定如果对方回答”多喝点水”就一脚踹了他。过一会儿手机振动起来,短信内容:”开门。”……这个大笨蛋!谁让他来的啦!我起身用最快的速度冲去门口,此时手机再次振动,我一手开门一手兴奋的点开:”多呼吸点新鲜空气,运动运动。”

3.心情不好的时候喷了点儿香水,gucci木兰那个。我男朋友回家来趴到我脸上闻闻,说,哎呀这味儿真好闻,像小时候后院李子树上的大李子!你知道那李子多大吗?这么大的大李子!哈哈哈哈哈这么大的大李子!<( ̄) ̄)>

4.和某一任牵手过马路的时候,他说“你手好凉啊”,我说“是啊手凉没人疼啊 ”,他说“别瞎说”。我以为他要说(不是有我疼你吗 之类的),结果他说“手凉的人死得快”┳_┳

5.我说“我好冷”,他把他身上的衣服裹得更紧了。

6.跟IT男视频,一点开他就笑的很开心,这边我正娇羞呢,他说哈哈哈你的头好大都占了整个屏幕了哈哈哈。。。

7.前任说喜欢可爱的女生,特地头发扎成双马尾,穿着蕾丝领口的衣服去见他,他看到我说我后脑勺像被劈开了,蕾丝边像他家的窗帘。。

8.我说我今晚要自己去看电影,他说,注意安全。

9.看略带恐怖的电影,我拽住他的袖子。他轻轻拨开我的小手,说:“你手汗太多,我白衣服留印子就不好了”。呵呵

10.“你干嘛呢?”过了几分钟他没回我又问“睡了吗?”过了几分钟依旧没回我气绝说“我睡了”那货秒回:“晚安宝贝。”

11.刚在一起的时候去约会,他突然摸我的脸说好久没摸过了,我以为他是太久没摸过女生的脸,然后他居然说自从他的痘痘好了以后,好久都没摸过这么凹凸不平的脸了。

12.异地恋,某次分别前在车站依偎着聊天,他说:“我以前一直想着要找个腿细的女朋友,因为我忌讳女孩腿粗。遇到你以后我觉得腿粗根本不是什么问题。”“喔…”“胸小才是。”

代码调一天,妹纸滚一边

从输入URL到页面加载完的过程中都发生了什么事情

一个HTTP请求的过程

为了简化我们先从一个HTTP请求开始,简要介绍一下一个HTTP求情的网络传输过程,也就是所谓的“从输入 URL 到页面下载完的过程中都发生了什么事情”

●DNS Lookup 先获得URL对应的IP地址
●Socket Connect 浏览器和服务器建立TCP连接
●Send Request 发送HTTP请求
●Content Download 服务器发送响应

如果下到物理层去讲就有点耍流氓了,如果这些你还认可这几个步骤的话,我们就来讲一下这里面存在的性能问题。

●如果你对DNS的查询还有印象的话现在反思一下,DNS Lookup就是为了获取一串IP地址要和无数个DNS服务器进行通信,这要消耗多少时间?别忘了你查询完了的时候你还没和那边的服务器通信呢。

●TCP连接要三次握手,如果服务器很远的话这三次握手要花多少时间?别忘了建立连接之后你还没发请求呢。(通常到这里0.5秒就出去了)

●发送HTTP请求的时候你要知道一点就是我们的网络带宽上行和下行通常是不一样的,通常上行的带宽会小一些,一个的话还好,但是现在的网页通常都会后续请求很多资源,带宽小的时候上行拥塞怎么办?别忘了已经到第三步了,服务器还没给你发响应呢,现在你的浏览器还什么都画不出来。

●终于到了服务器发响应了,不巧你访问的这个服务器比较忙,好几万个人都要这个资源,服务器的上行带宽也是有限的,怎么办?

我觉得我出了几道还不错的面试题。顺便提一下,前两步的延迟和网络带宽的影响不大;后两步加带宽是能一定程度缓解,不过你要有钱,而且很贵。虽说博主做过Webkit本地渲染的优化,但是深知网页加载的主要时间还是浪费在网络通信上,所以在这些步骤上的优化会比你在浏览器内核的优化省力且效果明显。

网络方面的主要优化手段,博主总结一下不外乎缓存,预取,压缩,并行。以后如果再有面试问性能优化之类的问题,大家都可以照着这个思路去考虑,下面就分阶段介绍一下现有的优化手段。

DNS 优化

对于DNS优化,缓存无疑是最简单粗暴且效果明显的了。说到缓存就一定要提到缓存层级:

●浏览器DNS缓存,chrome可以看 chrome://net-internals/#dns

●系统DNS缓存

●hosts文件,墙里的小伙伴们应该有印象

●各个DNS服务器上的缓存

当然DNS缓存失效期通常都比较短,很多情况下都要再去查找,为了降低用户体验到的延迟(注意这里不是网络延时)预取是一个不错的方法。比如说你敲网址的时候还没有敲完,但是浏览器根据你的历史发现你很有可能去访问哪个网站就提前给你做dns预取了,比如你打了一个“w”的时候,chrome已经帮你去找weibo.com的ip地址了。chrome用户可以看一下 chrome://predictors/ 你就知道了。

此外浏览器还会记录你过去的历史知道每个域名下通常还会有哪些其他的链接建立起网站的拓扑结构,当你访问这个域名下的网站他就会预先对其他链接的域名进行DNS解析可以参照 chrome://dns/。

TCP 优化

看到前面的DNS的具体优化这么繁杂,知道这简单的一步没那么简单了吧。结果到TCP这一步优化反而简单了,因为刚才dns已经把ip都预先弄到了那么我们顺着刚才的步骤再建立连接就好了。所以在你敲第一个字母的时候dns解析完了就去建立连接了,这时候你可能网址还没敲完。当你刚访问一个网站的时候浏览器刷刷刷的帮你把到别的服务器的TCP连接给你建好。

HTTP传输优化

写到这里可能有人会想,既然已经把TCP连接建立好了,那我干脆预取更进一步,把所有的链接内容直接预取下来不就好了,这样我网址还没敲完网页就已经加载完成了。这个想法是好的,但现实却是残酷的。因为要记住我们的带宽是有限的,DNS和TCP连接量级都比较轻,对网络带宽不会占据太多,但是HTTP传输就不一样了如果你所有链接都去预取的话你的带宽很快就被占满了,这样你正常的请求无法得到满足,性能反而会严重下降。

缓存就又出现了,提缓存必提层次结构。

●PageCache 这个是最快的了,直接在内存中缓存了现有网页的dom结构和渲染结果,这就是你为什么在点前进后退的时候会这么快。

●HTTP Cache 文件级别的Cache存在本地的文件系统上按照RFC2616实现。

●代理Cache 如果是通过代理服务器上网的话,代理服务器通常也会按照缓存标准

●CDN 一个地理上离你很近的内容服务器,比如说你在北京请求杭州淘宝的一个图片,结果在北京的一个CDN上有这个图片,那么就不用去杭州了。

●DMOC(distributed memory object caching system)CDN主要存放的是静态数据,但是网页中通常有很多动态的数据需要查数据库,流量多了压力就会很大,通常服务器外围还会有一层内存缓存服务器,专门缓存这些数据库中的对象,据《淘宝技术这10年》称可以减少99.5%的数据库访问。

●Server 其实真正落在服务器上的请求已经不多了。

大家看到这里有没有想到能在什么地方再加一层缓存呢?其实可以在2和3之间加,也就是在路由器上加缓存。小米的路由器和搜狗合作的预取引擎其实就相当于是在路由器上加一层缓存款顺便智能预取一下。博主为什么在这里另起一段专门谈小米呢,难不成是小米的水军?才不是呢,是因为博主看到这个消息的时候心都凉了,和博主的毕设撞车了有木有。去年在360刚出随身WiFi的时候博主想到了这么个点子,还想着把这个东西做出来之后用这个创业和360谈合作。结果最近刚做完,论文也投出去了,幻想着开启人生巅峰,颠覆行业结果就发现小米和搜狗出了这么个一样的东西还都商业化了。说好的人生巅峰就这样没有了,早知道去年就先申请个专利了。

另一个HTTP常用的优化就是压缩了,网络传输时间 = 消息大小/网速 既然网速比较贵那么就压缩一下吧,大部分服务器都会对HTTP消息进行gzip压缩。可以在Http Header中看到,具体的就不细说了。

未来协议 SPDY

上面的都是传统做法,下面讲一个未来的技术。由于HTTP协议是上个世纪制定的协议了,已经不能很好的适应现在Web的发展,所以Google提出了SPDY协议目前是指定中的HTTP2.0标准的一个底版。SPDY主要有下面的特点:

●一个TCP连接上并行多个HTTP连接,减少连接的建立时间

●请求优先级(目前还没看到具体实现)

●HTTP头部压缩,上文提到的HTTP压缩是对HTTP body的压缩,并没有对头部压缩。对于小的HTTP消息,头部的比重还是很大的,而现在的web中存在大量小消息。

●Server push/hint 服务器主动推送对象(可以想象成服务器帮客户端预取)

业界目前对SPDY是有赞有弹,博主也持谨慎的态度。主要在1和4上,4其实和之前提到的HTTP直接预取的矛盾点一样,万一推送的不需要又占据了带宽怎么办,hint到底该如何实现都有困难。第一条潜在的风险就是TCP连接中途断开,那么所有的连接就全部停掉了,PC互联网这种情况可能会少一些,但是移动互联网中TCP连接断开的情况还是比较常见的。不过作为一个未来的技术还是有必要关注一下。

jQuery 瀑布流布局插件 jQuery Masonry 参数介绍

瀑布流布局神器——JQuery Masonry
网址:http://masonry.desandro.com/index.html

jQuery Masonry是一个构建瀑布流布局的一个jQuery插件,通过它可以轻松使页面元素通过绝对定位实现瀑布流布局。

1\ 标记需要布局的容器和Item
Masonry需要一个容器来装载结构类似的子元素

<div id="container">  
  <div class="item">...</div>  
  <div class="item">...</div>  
  <div class="item">...</div>  
  ...  
</div> 

然后在页面中添加Jquery和Masonry脚本引用,要求jquery版本在1.6+

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>  
<script src="/path/to/jquery.masonry.min.js"></script>  

2\编写CSS
所有需要布局的元素大小由CSS来确定,所有元素必须是浮动的

.item {  
  width: 220px;  
  margin: 10px;  
  float: left;  
} 

 
3\编写脚本
编写脚本传入初始化布局参数,让容器自动布局。
强烈推荐配置itemSelector和columnWidth两个参数。更多参数配置请查阅官网。

$(function(){  
  $('#container').masonry({  
    // options  
    itemSelector : '.item',  
    columnWidth : 240  
  });  
});

OK,到此结束。So easy~

以下是更多参数介绍:

$('#wrapper').masonry({

  singleMode: false,
  // 禁用测量每个浮动元素的宽度。
  // 如果浮动元素具有相同的宽度,设置为true。
  // 默认: false

  columnWidth: 240,
  // 1列网格的宽度,单位为像素(px)。
  // 默认: 第一个浮动元素外宽度。

  itemSelector: '.box:visible',
  // 附加选择器,用来指定哪些元素包裹的元素会重新排列。

  resizeable: true,
  // 绑定一个 Masonry 访问 用来 窗口 resize时布局平滑流动.
  // 默认:true

  animate: true,
  // 布局重排动画。
  // 默认:false

  animationOptions: {},
  // 一对动画选项,具体参数可以参考jquery .animate()中的options选项

  appendedContent: $('.new_content'),
  //  附加选择器元素,用来尾部追加内容。
  // 在集成infinitescroll插件的情况下使用。

  saveOptions: true,
  // 默认情况下,Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项
  // 默认:true

},  function() {}
  // 可选择的回调函数
  // 'this'将指向重排的Masonry适用元素
);

 

更多参数介绍可以参考官方网站: http://masonry.desandro.com/docs/options.html

25个通过本插件实现的网页效果: 《25 Powerful Examples of Masonry jQuery Web Design》
 http://smashinghub.com/25-powerful-examples-of-masonry-jquery-web-design.htm

局域网屏幕共享软件(InletexEMC)下载 v1.0绿色免费版

下载地址:http://pan.baidu.com/s/1jNehw

局域网屏幕共享软件InletexEMC使用技巧.ppt 

InletexEMC是国外制作的一款小巧的屏幕共享软件,这里提供的是纯绿色免费的经典版本,新版已经开始收费了,这个我找了很久才找到。非常给力的屏幕共享工具,有需要的朋友赶快来下载吧!

局域网屏幕共享软件(InletexEMC)
永久免费:它是完全免费的!对企业免费!对个人免费!
绿色软件:无需安装,不对系统产生垃圾。
点对点传输:它是点对点传输的,支持LAN/WAN,可以在私人网络、局域网、互联网中使用,支持多人同时共享同一电脑屏幕。
容易使用: 不管是主机还是客户机,都是同一个执行程序;任何人都可以做主机,任何人也可以做客户机;界面操作简单,一看就懂。

程序运行主界面

 
上图是程序运行的第一个主界面,如果您是要作为培训主机,也就是希望别人能够看到你的屏幕,请鼠标点击左边第一个图标。如果是客户机(要看培训讲师主机屏幕的人),请在您的机器上运行软件,然后鼠标点击第二个图标。

 

选择作为主机

 

假如您用鼠标点击了左边第一个按钮,则会出现上图的对话框,这时主机已经开始服务了,只需等待要看到你电脑屏幕的人来连接就可以了。

(对话该框里面显示了你作为培训主机的IP地址为:192.168.1.100)

请注意:这个主机的IP非常重要,需要在客户机上输入该IP,才能连上您的主机。

 

当有客户机连上后,客户机就能看到你的屏幕了,并且你的这个对话框中会显示连接进来的客户机名称和IP地址,如下图:

 

 从上图可以看到,有一台客户机IP为 192.168.1.102 的 XXX 用户连接到了 主机 192.168.1.100 上,他已经可以看到 192.168.1.100 主机的屏幕了。

 

 选择作为客户机(观看者主机)

 

假如您用鼠标点击了左边第二个按钮,则会出现上图的对话框,需要您输入(Your Name)您的名字和(Session IP)主机的IP地址,这个Session IP 就是培训讲师主机的IP地址,我们这里的主机IP是 192.168.1.100,所以输入这个IP即可,输入完成后,如下图:

 

输入完毕后,鼠标点击“Join Session”按钮,即可看到主机的电脑屏幕了,如下图:

 

 

点击左边数起的第三个按钮,可以退出,点击第四个按钮,可以全屏,如下图:

 

 

如何退出全屏模式

 这里提示一下,在进入全屏后,要想退出全屏模式的话,需要在全屏模式下,把鼠标移动到屏幕的最上方,会弹出退出全屏的按钮栏,单击退出全屏按钮即可。

 

 好啦,分享完毕,希望大家有好的软件也向我留言推荐哦,呵呵!

下载地址 :http://files.cnblogs.com/taven/InletexEMC.rar

关于clearfix清除浮动

关于clearfix清除浮动

起源:

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

说明:

*对大多数符合标准的浏览器应用第一个声明块,目的是创建一个隐形的
内容为空的块来为目标元素清除浮动。
*第二条为clearfix应用 inline-table 显示属性,仅仅针对IE/Mac。
*利用 * / 对 IE/Mac 隐藏一些规则:
* height:1% 用来触发 IE6 下的haslayout。
*重新对 IE/Mac 外的IE应用 block 显示属性。
*最后一行用于结束针对 IE/Mac 的hack。
由于此方法针对的浏览器或成为历史(尤其是Mac下的IE5 ),或正在靠近
标准的路上,这个方法就不再那么与时俱进了。

抛掉对 IE/Mac 的支持之后,新的清除浮动方法:

/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

说明:

IE6 和 IE7 都不支持 :after 这个伪类,因此需要后面两条来触发IE6/7的haslayout,以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。

在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 同时应用 zoom:1 或者直接就写成:

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{*zoom:1;}

以我目前的浅薄认知来讲,以上写法应该也可以直接达到同样效果。关于这个地方,在文章的评论里也有些讨论,我希望再听听大家的高见。

我平时都是用 overflow:hidden 来清除浮动的,因为够简单粗暴。但是 overflow 有时候也不太适用:

父级元素使用 overflow:hidden 时,如果其子元素定位到部分或全部在父元素之外,父元素就会对超出其外的子元素部分进行裁剪。

对 css3 来说,也会 overflow:hidden 也会对一些属性产生影响。
例如 box-shadow, 当父元素使用 overflow:hidden 属性时,box-shadow 会被裁剪。

其他可能被影响的元素如 text-shadow 和 transform。可以参考 Andy Ford 的 demo

对于那些不愿意再给标签添加额外的 clearfix 类来清除浮动的人来说,直接将需要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。

.group:after,
#content:after,
#sidebar:after,
#some .other .thing:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
zoom:1;
}

这种情况下,html 和 css 文件就像一个跷跷板的两头。html 代码倒是整洁了,css 代码却出现了一定的繁冗。而且一旦专题页面过长,或者在项目中使用,用这个清除组的方式反而会不胜其扰。

归结下来,还是得看个人、项目的权衡选择.虽然我一直用简单粗暴的overflow:hidden,但是现在更倾向于使用 clearfix,感觉这种一体化的东西更靠谱,能避免偶尔对 zoom 的遗忘。

成熟的东西稳定性好,但是会比较复杂、厚重;简单的灵活性好,但是过于零散、随意,没有组织性,还没那么稳定.权衡决定到底要使用那种方法,有时候反而比问题本身还让人头疼.

我个人的想法是没有好与坏的区别,只有合适不合适的区别。但是我们一直都受困于所受的教育,什么问题都有标准答案,非对即错,非好即坏。经常可见对一些工具的讨论,都是奔着争出个谁好谁坏而去的,例如 jQuery mootools YUI.相比起到底是好谁坏,我们还是最好赶紧转变思想,摒弃”一刀切”的思想吧。

Taylor swift全部歌曲

red:http://pan.baidu.com/share/link?shareid=105032&uk=4112146694

speak now :http://pan.baidu.com/share/link?uk=1493798068&shareid=176143

TAYLOR SWIFT:http://pan.baidu.com/share/link?shareid=90731&uk=1493798068

1989:http://pan.baidu.com/s/1o6FQ77G

fearless:http://pan.baidu.com/s/1i3qsF8x

纯CSS设置Checkbox复选框控件的样式

Checkbox复选框 是经常使用表单元素,本文将用CSS3对Checkbox复选框的样式进行修改。

这里不过是抛砖引玉,读懂后,可以自由发挥。让你的网站中的Checkbox设置一个与众不同

查看演示,可以看到我们将要创建的复选框样式。

演示地址

首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。

/**
 * 隐藏默认的checkbox
 */
input[type=checkbox] {
visibility: hidden;
}

隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有for属性的label标签时,对应的Checkbox复选框会被选中。这意味着,我们可以通过label的点击事件来处理我们的Checkbox复选框。

样式一

此复选框风格就像一个解锁滑块,滑块选中和未选中状态会显示在的不同位置。当单击滑块按钮(label标签),将会选中复选框,然后滑块移动到ON位置。

我们开始创建复选框区的HTML。

<section>
  <!-- Checbox One -->
  <h3>Checkbox One</h3>
  <div class="checkboxOne">
  <input type="checkbox" value="1" id="checkboxOneInput" name="" />
 	<label for="checkboxOneInput"></label>
  </div>
</section>

因为这个样式的复选框,一个label不足以完成任务,我们用一个DIV元素包含checkbox,我们需要使用它们来做黑色条带和圆角。

/**
 * Create the slider bar
 */
.checkboxOne {
width: 40px;
height: 10px;
background: #555;
margin: 20px 80px;
position: relative;
border-radius: 3px;
}

现在,我们可以把label作为条带上的滑块,我们希望按钮效果是从条带的一侧移动到另一侧,我们可以添加label的过渡。

/**
 * Create the slider from the label
 */
.checkboxOne label {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
 
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: -3px;
left: -3px;
 
background: #ccc;
}

现在这个滑块在选中(关闭)位置,当我们选中复选框,我们希望有一个反应发生,所以我们可以移动滑块到另一端。我们需要知道,判断复选框被选中,如果是则改变label元素的left属性。

/**
 * Move the slider in the correct position if the checkbox is clicked
 */
.checkboxOne input[type=checkbox]:checked + label {
left: 27px;
}

这就是你需要的第一个Checkbox复选框的CSS。

样式二 checkbox-two

此复选框风格像样式一样,但不同的是,这个滑块按钮会改变颜色。当您单击滑块按钮,它移动到条带的另一边,并改变按钮的颜色。

HTML代码和样式一是完全一样的。

<section>
  <!-- Checbox Two -->
  <h3>Checkbox Two</h3>
  <div class="checkboxTwo">
  <input type="checkbox" value="1" id="checkboxTwoInput" name="" />
 	<label for="checkboxTwoInput"></label>
  </div>
</section>

这个DIV会变成比样式一大一些的条带,label依然是作为滑块,使用下面的CSS来定义它。

这个样式中间有一个黑色的条,滑块会沿着它左右滑动,但是DIV元素已经使用了,所以我们需要用:before伪类创建一个新的元素。

/**
 * Create the line for the circle to move across
 */
.checkboxTwo:before {
content: '';
position: absolute;
top: 19px;
left: 14px;
height: 2px;
width: 90px;
background: #111;
}

和样式一一样,接下来我们为label写CSS样式,把它用作滑块。

/**
 * Create the circle to click
 */
.checkboxTwo label {
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
 
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 9px;
z-index: 1;
left: 12px;
background: #ddd;
}

我要实现和样式一差不多的选中状态,当选中时改变label的left和background属性。

/**
 * Create the click event for the checkbox
 */
.checkboxTwo input[type=checkbox]:checked + label {
left: 84px;
background: #26ca28;
}

样式三 checkbox-three


这个复选框的样式比样式二更复杂一些,它和前面的例子一样会左右滑动,并且当改变选中和未选中的状态时,滑块滑动到另一侧并且在原位置显示对应的文本。

首先,我们写HTML代码,这和前面是相同的。

<section>
  <!-- Checbox Three -->
  <h3>Checkbox Three</h3>
  <div class="checkboxThree">
  <input type="checkbox" value="1" id="checkboxThreeInput" name="" />
 	<label for="checkboxThreeInput"></label>
  </div>
</section>

然后,我们用相同的方式把div作为滑块,下面的代码会创建一个黑色圆角的条带,我们可以把滑块和文本放到里面。

/**
 * Checkbox Three
 */
.checkboxThree {
width: 120px;
height: 40px;
background: #333;
margin: 20px 60px;
 
border-radius: 50px;
position: relative;
}

当滑块处于未选中状态时,滑块会在左侧,并且右边显示”OFF”,当点击的时候,滑块移动到右侧,左侧显示”ON”。
但是元素数量不足以让我们实现这些功能,所以我们要用:before和:after两个伪类创建两个元素,分别放置”ON”和”OFF”。

/**
 * Create the text for the On position
 */
.checkboxThree:before {
content: 'On';
position: absolute;
top: 12px;
left: 13px;
height: 2px;
color: #26ca28;
font-size: 16px;
}
/**
 * Create the label for the off position
 */
.checkboxThree:after {
content: 'Off';
position: absolute;
top: 12px;
left: 84px;
height: 2px;
color: #ddd;
font-size: 16px;
}

和前面一样,我们来添加滑块的样式,当被点击时它会移动到另一侧,并且改变颜色。

/**
 * Create the pill to click
 */
.checkboxThree label {
display: block;
width: 52px;
height: 22px;
border-radius: 50px;
 
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 9px;
z-index: 1;
left: 12px;
background: #ddd;
}
 
/**
 * Create the checkbox event for the label
 */
.checkboxThree input[type=checkbox]:checked + label {
left: 60px;
background: #26ca28;
}

样式四 checkbox-four

在这个样式中,我们会创建两个圆形,当点击时改变里面的圆形的颜色表示选中与未选中的状态。
和前面一样的HTML代码。

<section>
  <!-- Checbox Four -->
  <h3>Checkbox Four</h3>
  <div class="checkboxFour">
  <input type="checkbox" value="1" id="checkboxFourInput" name="" />
 	<label for="checkboxFourInput"></label>
  </div>
</section>

接下来我们要为checkbox创建外面的圆形,使用CSS的border-radius属性,并且设置为100%就可以创建一个正圆形。

/**
 * Checkbox Four
 */
.checkboxFour {
width: 40px;
height: 40px;
background: #ddd;
margin: 20px 90px;
 
border-radius: 100%;
position: relative;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

然后我们用label元素来创建一个小一点的圆形,它会根据checkbox状态来改变颜色。

/**
 * Create the checkbox button
 */
.checkboxFour label {
display: block;
width: 30px;
height: 30px;
border-radius: 100px;
 
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
 
background: #333;
 
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}
当复选框被选中的时候,我们要改变内圈的背景颜色来表示选中状态。

/**
 * Create the checked state
 */
.checkboxFour input[type=checkbox]:checked + label {
background: #26ca28;
}

样式五 checkbox-five

这个复选框的样式有些不同,它看起来只是比浏览器默认的checkbox样式稍微好了些,但是不同的是我们可以根据自己的需要来定义它的样式了。
首先还是一样的HTML代码

在前面的例子中,我们把div作为checkbox的滑动条带或者外部的圆圈,但是这一次我们不需要了,可以使用div元素来设置复选框的区域。

/**
 * Checkbox Five
 */
.checkboxFive {
width: 25px;
margin: 20px 100px;
position: relative;
}

label标签用于Click事件和我们要定义的复选框的方框样式。

/**
 * Create the box for the checkbox
 */
.checkboxFive label {
cursor: pointer;
position: absolute;
width: 25px;
height: 25px;
top: 0;
  left: 0;
background: #eee;
border:1px solid #ddd;
}

接下来,我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px x 9px的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后,它会看起来像一个字母L。然后我们可以使用CSS的transform属性让它旋转一下,这样看起来就像是一个对勾。

/**
 * Display the tick inside the checkbox
 */
.checkboxFive label:after {
opacity: 0.2;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 6px;
left: 7px;
border: 3px solid #333;
border-top: none;
border-right: none;
 
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

在上面的CSS中,我们已经设置它的透明度为0.2,所以你会看到的复选框有一个半透明的对勾。你可以在悬停的时候加深一点,在选中时,可以把设置为不透明。

/**
 * Create the hover event of the tick
 */
.checkboxFive label:hover::after {
opacity: 0.5;
}
 
/**
 * Create the checkbox state for the tick
 */
.checkboxFive input[type=checkbox]:checked + label:after {
opacity: 1;
}

这将会为你创建全新的checkbox复选框样式。
观看演示,看看这些复选框是如何工作的。

CSS定义Radio单选项和Checkbox复选框样式

完全使用css来实例

<style type=”text/css”>
form#form1 {font:12px tahoma,sans-serif}
input[type="checkbox"] {visibility:hidden;width:0;height:0;margin:0;padding:0;}
input[type="checkbox"]+label {background:url(checkstyle.gif) no-repeat;padding-left:18px;color:#ccc;}
input[type="checkbox"]+label:hover {color:#369;background-position:0 -16px;}
input[type="checkbox"]:checked+label {color:#000;background-position:0 -48px;}
input[type="checkbox"]:focus+label {color:#963;background-position:0 -32px;}
input[type="radio"] {visibility:hidden;width:0;height:0;margin:0;padding:0;}
input[type="radio"]+label {background:url(checkstyle.gif) no-repeat 0 -64px;padding-left:18px;color:#ccc;}
input[type="radio"]+label:hover {color:#369;background-position:0 -80px;}
input[type="radio"]:checked+label {color:#000;background-position:0 -112px;}
input[type="radio"]:focus+label {color:#963;background-position:0 -96px;}
</style>

史上最全的css hack(兼容ie6-9,firefox,chrome,opera,safari)

CSS的浏览器兼容

在这个浏览器百花争鸣的时代,作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心,主要体现在javascript和css上面。javascript我这次就不谈了,先说说css。

为了适应不同浏览器不同的版本(版本主要就ie来说),ie这朵奇葩现在我们要兼容6-9,它的10也快出来了。。。在ie下我们可以写条件注释来区分ie和其他浏览器,以及ie的版本,这些请大家自行google。这篇文章主要讨论的是css hack。下面废话补多说了,直接上代码:

<!DOCTYPE html>  
<html>  
<head>  
    <title>Css Hack</title>  
    <style>  
    #test   
    {   
        width:300px;   
        height:300px;   
          
        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow\0;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/
    }  
    :root #test { background-color:purple\9; }  /*ie9*/
    @media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari*/
    </style>  
</head>  
<body>  
    <div id="test">test</div>  
</body>  
</html>

    上面这段代码大家可以直接copy出来,保存成html在各浏览器试试。下面我来分析下:
    background-color:blue; 各个浏览器都认识,这里给firefox用;
    background-color:red\9;\9所有的ie浏览器可识别;
    background-color:yellow\0; \0 是留给ie8的,但笔者测试,发现最新版opera也认识,汗。。。不过且慢,后面自有hack写了给opera认的,所以,\0我们就认为是给ie8留的;
    +background-color:pink; + ie7定了;
    _background-color:orange; _专门留给神奇的ie6;
    :root #test { background-color:purple\9; } :root是给ie9的,网上流传了个版本是 :root #test { background-color:purple\0;},呃。。。这个。。。,新版opera也认识,所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
    @media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。。。
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

    好了就这么多了,特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题,但是毕竟不符合W3C规范,我们平时写css最好是按照标准来,这样对我们以后维护也是大有好处的,实在不行再用。

Web性能优化:图片优化

HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片。从性能优化的角度看,图片也绝对是优化的热点和重点之一,Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段,本文覆盖了Web图片优化的方方面面,从基本的图片格式选择、到尚未被广泛支持的响应式图片均有所提及。

Google Web Fundamentals的说法我很喜欢:

图片优化既是一门艺术,也是一门科学,图片优化是一门艺术,是因为单个图片的压缩不存在最好的特定性方案,而图片优化之所以是一门科学,是因为许多开发得很出色的方法和算法可以明显减小图片的大小。要找到图片的最优设置,需要按照许多维度进行认真分析:格式能力、编码数据内容、像素尺寸等。

传送门:跳过理论直达自动优化图片 点这里

真的要用图片吗?

要实现需要的效果,真的需要图片吗?这是首先要问自己的问题。浏览器和Web标准的发展速度极快,记得数年前我在用微软Silverlight 1.0写视频播放器的时候,中文还不能使用自定义字体显示,所以那时候写了很多糟糕的代码把需要的文字在服务器上生成图片并缓存起来。用户下载起来很慢,搜索引擎也完全无法检索这些文字。

但是现在不一样了,很多特效(渐变、阴影、圆角等等)都可以用纯粹的HTML、CSS、SVG等加以实现,实现这些效果少则寥寥数行代码,多则加载额外的库(一张普通的照片比非常强大的效果库也大了许多)。这些效果不但需要的空间很小,而且在多设备、多分辨率下都能很好的工作,在低级浏览器上也可以实现较好的功能降级。因此在存在备选技术的情况下,应该首先选择这些技术,只有在不得不使用图片的时候才加入真正的图片。

备选技术

●CSS效果、CSS动画。提供与分辨率无关的效果,在任何分辨率和缩放级别都可以显示得非常清晰,占用的空间也很小。

●网络字体。现在连很多图标库都是用字体方式提供,保持文字的可搜索性同时扩展显示的样式。

前端工程师最好能和设计师、产品经理保持沟通,帮助他们了解到什么样的效果比较“简洁、高效、可维护”,毕竟对于CSS来说改变圆角矩形的Radius可以实时看到效果,用图片的话至少要重新生成图片、切图并替换资源。Retina、高分辨率屏幕、多尺寸的设备,这些都加快了非图片特效的发展,想想在高分辨率屏幕下Windows 7的惨不忍睹,就知道原生的图片资源绝对不是多多益善。

图片格式的选择

如果效果真的需要图片来表现,那么选择图片格式是优化的第一步。我们经常听到的词语包括矢量图、标量图、SVG、有损压缩、无损压缩等等,我们首先说明各种图片格式的特点

图片格式 压缩方式 透明度 动画 浏览器兼容 适应场景
JPEG 有损压缩 不支持 不支持 所有 复杂颜色及形状、尤其是照片
GIF 无损压缩 支持 支持 所有 简单颜色,动画
PNG 无损压缩 支持 不支持 所有 需要透明时
APNG 无损压缩 支持 支持 Firefox
Safari
iOS Safari
需要半透明效果的动画
WebP 有损压缩 支持 支持 Chrome
Opera
Android Chrome
Android Browser
复杂颜色及形状
浏览器平台可预知
SVG 无损压缩 支持 支持 所有(IE8以上) 简单图形,需要良好的放缩体验
需要动态控制图片特效

其中APNG和WebP格式出现的较晚,尚未被Web标准所采纳,只有在特定平台或浏览器环境可以预知的情况下加以采用,虽然均可以在不支持的环境中较好的功能降级,但本节暂不讨论这两种格式。图片格式选择过程如下:

颜色丰富的照片,JPG是通用的选择

●人眼的结构很适合查看JPG压缩后的照片,可以充分的忽略并在脑中补齐细节

●JPG在压缩率不高时保留的细节还是不错的

●WebP能够比JPG减少30%的体积,但目前兼容性较差

如果需要较通用的动画,GIF是唯一可用的选择

●GIF支持的颜色范围为256色,而且仅支持完全透明/完全不透明

●GIF在显示颜色丰富的动画时可能出现颜色不全、边缘锯齿等问题

如果图片由标准的几何图形组成,或需要使用程序动态控制其显示特效,可以考虑SVG格式

●SVG是使用XML定义的矢量图形,生成的图片在各种分辨率下均可自由放缩

●SVG中可以通过JavaScript等接口自由变换图片特效,可以完成其中部分元素的自由旋转、移动、变换颜色等

如果需要清晰的显示颜色丰富的图片,PNG比较好

●PNG-8能够显示256种颜色,但能够同时支持256阶透明,因此颜色数较少但需要半透明的情景(如微信动画大表情)可以考虑PNG-8

●PNG-24可以显示真彩色,但不支持透明,颜色丰富的图片推荐使用(如屏幕截图、界面设计图)

●PNG-32可以显示真彩色,同时支持256阶透明,效果最好但尺寸也最

图片尺寸的选择

尺寸,曾经是最不需要讨论的话题,但自从Retina出现之后世界就变得复杂多了。关于移动设备上的像素和尺寸,展开说足够写一篇论文,我建议想详细了解的同学参考下面的文章:

浅谈移动Web开发(上):深入概念

这里只说我们关心的部分和结论,我们需要分清不同类型的像素:CSS像素和设备像素。一个 CSS像素可能包含多个设备像素。对于图片来说,在高DPI的屏幕上需要使用分辨率更高的图片,如果我们讨论的是Retina,那么就需要2倍分辨率(几乎4倍尺寸)的图片。这几乎没有取巧的空间,屏幕就是那么大,需要的图片也就是那么大。(鸽子为什么那么大?^_^)

我们能够控制的地方是“恰好”显示所需尺寸的图片。例如在屏幕中通过CSS或者标签的wihth/height属性,将一副200×200的图片调整为100×100大小,那么这其中就有(200×200)-(100×100)=30000个像素是浪费的,这占到了图片尺寸的75%!

之所以有这么大的浪费,是因为图片的尺寸与面积基本成正比,与宽高的平方成正比。因此良好的计算客户端实际显示的图片尺寸,能够大大减小图片的大小。即使只有长和宽都只有10px被浪费,但是当图片足够大时,这部分也将产生很大影响。

响应式图片

上面提到“恰好”显示客户端所需大小的图片,听上去很容易不是吗?但当响应式布局出现后,这就变得极其困难。我们要支持上至1920宽度,下至320宽度的无数种设备,如果使用1920宽度的图片,那么在小型设备(这类设备往往对网速和流量更加敏感)上每个用户都要付出额外的带宽和等待时间,如果使用320宽度的图片,那么在1920的屏幕上就像是在高清屏上使用DOS那么让人难以接受。

很自然的,我们需要图片也能“响应式”加载,根据所在设备的不同,加载不同尺寸的图片。响应式图片尚没有写入Web标准,实现起来也有诸多不便和兼容性限制。我建议参考百度EFE团队的这篇文章:

实战响应式图片

响应式图片虽然尚未成为标准,但这是Web图片优化的一柄利器,一旦被广泛支持,再没有比缩小图片尺寸更有效的优化方法了。

优化JPG和PNG

选择了正确的图片格式,按照正确的大小生成了图片后,我们还需要对图片进行进一步优化,这种优化一般分两步进行:

1、有损优化,删除没有出现或极少出现过的颜色,合并相邻的相近颜色。这一步并不必须,如PNG格式就直接进入下一步

2、无损优化,压缩数据,删除不必要的信息

JPG和PNG格式的图片生成后,一般还有进一步优化的空间,例如JPG格式的照片中,可能携带有相机的Exif信息,PNG格式的图片中可能带有Fireworks等软件的图层信息等。去除这些额外信息后,还可以通过减小图片的调色板,去除没有出现过的颜色,以及合并相邻的相同颜色等手段来进行优化。原理性的内容这里不再赘述,仅介绍工程中可用的优化工具。

不同格式的图片有一系列工具,这些工具有有更多种参数调节方案,常见的几种调节工具有:

工具 用途
jpegtran 优化JPG图片
OptiPNG 无损PNG优化
AdvPNG 无损PNG优化
PNGQuant 有损PNG优化

如果你真的需要追求各种图片的极限压缩,可以参阅这些工具的文档,但是对于一般的Web应用,面对的图片种类多样,几乎不可能在工程中实现对每种工具的独立配置,因此推荐使用以下工具来进行优化。这些工具往往使用了上表中的一种或几种优化工具。

ImageOptim (Mac)

主页:https://imageoptim.com/

Mac平台下非常赞的图片优化工具,只需要把需要优化的图片拖拽进ImageOptim,就能够完成对图片的优化。设置选择的也很丰富,目前支持JPG和PNG的优化。这是我在写文章时最常用到的工具,把网站用到的图片拖进去,优化就完成了~

Kraken (Web)

主页:https://kraken.io/

在免费模式下可以上传图片,优化后打包下载,很多国外企业也选择了它的收费服务。亲自测试Kraken的图片优化结果比ImageOptim一般要小3%左右,效果不错,当然价格也不错。适合偶尔有图片优化需求,或者不在开发机上没有优化软件可以使用的情况。

智图 (Web)

主页:http://zhitu.tencent.com/

腾讯ISUX团队有篇文章介绍智图:http://isux.tencent.com/zhitu.html

国货当自强,腾讯的智图工具推出不久,但实测效果很好,而且提供了Gulp的自动化支持,这部分会在后面自动优化章节介绍。只想建议一句,Kraken的首页比智图美好几百倍…… 而且把压缩前的PNG和压缩后的JPG放在一起对比大小,真的没关系么~

优化SVG

所有较新的浏览器都支持可缩放矢量图(SVG),SVG是基于XML的图片格式,适用于二维图片。可以将SVG标记直接嵌入网页,也可以作为外部资源嵌入。可以通过大多数基于矢量的绘图软件创建SVG文件。这是一段简单的SVG图形:

这个圆形轮廓为黑色,背景为红色,从Adobe Illustrator直接导出。可以从中看到大量元数据,例如图层信息、注释和XML名称空间等等,在浏览器中呈现资源时,通常不需要这些数据。因此我们需要使用一些工具去除这些不必要的元数据,仅保留必须的标记。

SVGO工具可以缩减SVG文件的体积,在这个的例子中,SVGO能够将Illustrator生成的SVG文件大小减小58%,从470字节缩减到199字节。

由于SVG是基于XML的格式,本质上是纯文本,所以,还可以采用GZIP压缩来减小传输大小,当然这需要一些服务器配置,例如在apache服务器中设置:

AddType image/svg+xml .svg
AddOutputFilterByType DEFLATE image/svg+xml

来对SVG文件启用GZip压缩(当然你还需要先加载deflate模块并进行适当配置,GZip的配置超出了本文的范畴,这部分内容请自行Google)

优化GIF和APNG

GIF有很多好处,在颜色数较低的时候能够大幅减小图片体积,而且他也是唯一能够较为通用的展示动画的图片格式。关于GIF格式的优化原理我并不熟悉,只是在工程中直接使用成型的压缩工具,在后文自动优化章节的Grunt中,会介绍通过Grunt Task进行自动优化的方法。

关于APNG,目前浏览器对他的支持还不够好,不过在支持HTML5的场景中,有成熟的开源工具apng-canvas可以用于支持APNG。

腾讯ISUX团队有篇文章介绍iSparta工具:http://isux.tencent.com/introduction-of-apng.html。这是目前几乎唯一能够批量处理APNG文件的工具,感兴趣的同学可以在那篇文章里得到更多地了解。

自动优化

前面说了太多关于如何优化各种不同格式图片的方法和工具,优化图片需要大量重复性的劳动,作为工程师显然不会忍受这一点,因此也产生出了很多工具对图片进行自动优化,这里主要介绍CDN、Grunt/Gulp、Google PageSpeed三种方式。

自动优化:CDN

使用CDN对图片自动进行优化,我在国外的CDN提供商处很少见到这类服务,倒是国内的两大新秀CDN七牛和又拍在这方面都做了大量工作。其工作方式为,向CDN请求图片的URL参数中包含了图片处理的参数(格式、宽高等),CDN服务器根据请求生成所需的图片,发送到用户浏览器。

七牛云存储的图片处理接口极其丰富,覆盖了图片的大部分基本操作,例如:

●图片裁剪,支持多种裁剪方式(如按长边、短边、填充、拉伸等)

●图片格式转换,支持JPG, GIF, PNG, WebP等,支持不同的图片压缩率

●图片处理,支持图片水印、高斯模糊、重心处理等

七牛云存储的图片处理接口使用并不复杂,例如下面这张原图:

我们通过如下URL请求,裁剪正中部分,等比缩小生成200×200缩略图:

http://qiniuphotos.qiniudn.com/gogopher.jpg?imageView2/1/w/200/h/200

自动优化:Grunt/Gulp

这里介绍用于图片优化的Grunt组件:grunt-image。前端工程师的重复性工作,例如合并静态资源、压缩JS和CSS文件、编译SASS等都可以使用Grunt等自动化工具批量完成,图片优化也是如此。

grunt-image非常强大,按照作者的介绍,其内部加载的图片优化工具包括了pngquant, optipng, advpng, zopflipng, pngcrush, pngout, mozjpeg, jpegRecompress, jpegoptim, gifsicle和svgo。支持批量自动优化PNG, JPG, SVG和GIF,速度也不错,配置方式支持单图片优化和全目录优化:

module.exports = function (grunt) {
  grunt.initConfig({
    image: {
      // 指定单独的图片优化      static: {
        options: {
          pngquant: true,
          optipng: true,
          advpng: true,
          zopflipng: true,
          pngcrush: true,
          pngout: true,
          mozjpeg: true,
          jpegRecompress: true,
          jpegoptim: true,
          gifsicle: true,
          svgo: true
        },
        files: {
          'dist/img.png': 'src/img.png',
          'dist/img.jpg': 'src/img.jpg',
          'dist/img.gif': 'src/img.gif',
          'dist/img.svg': 'src/img.svg'
        }
      },
      // 指定图片目录进行优化      dynamic: {
        files: [{
          expand: true,
          cwd: 'src/',
          src: ['**/*.{png,jpg,gif,svg}'],
          dest: 'dist/'
        }]
      }
    }
  });

  grunt.loadNpmTasks('grunt-image');};

自动优化:Google PageSpeed

Google做事风格比较彻底,看见哪个软件不好用就拿来直接fork出新版本或者干脆重写,对于Web优化,Google发布了了Google PageSpeed这个服务器模块,可以在apache或ngnix中加载,通过在服务器配置文件中进行设置来进行自动化的优化。对于图片格式转换、图片优化甚至图片LazyLoad都有相关选项。这部分展开会非常长,请感兴趣的同学参考Google的手册。

图片延迟加载插件Jquery LazyLoad

jquery.lazyload.js 是 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载,对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。
使用方法:
载入 JavaScript 文件

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

修改 HTML 代码中需要延迟加载的 IMG 标签

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">

调用 Lazy Load

$("#show-housedata").find("img").lazyload({effect:"fadeIn"})

    或

$(function() {
    $("img.lazy").lazyload({
        threshold:0,    //灵敏度。默认为 0 表示当图片出现在显示区域中的立即加载显示.
        failure_limit:0,//容差范围,检查是否在显示区域内.
        event:"scroll",//触发加载的事件.
        effect:"fadeIn",//加载使用的动画效果,如 show, fadeIn, slideDown 等jQuery自带的效果.
        effectspeed:5,//动画时间.
        container:$('.content'),//父容器。延迟加载父容器中的图片.
        data_attribute:"original",    //真实图片地址的 data 属性后缀.
        skip_invisible:true,//跳过隐藏的图片.
        appear:null,    //图片加载时的事件,参数:elements_left(未加载的图片数量)、settings.
        load:null//图片加载后的事件,参数同appear.
    });
})

官方网站:http://www.appelsiini.net/projects/lazyload

下载地址:

http://www.appelsiini.net/projects/lazyload/jquery.lazyload.min.js

https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js

https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

jQuery owl carousel响应式手机端图片触屏滑动特效

下载地址:http://pan.baidu.com/s/1mgl4etq

揭秘:习近平新年贺词释放5大信号

毫无悬念,这是2014年最后一天。刚刚,习近平发表了2015年新年贺词。

和2014年新年贺词一样,新的贺词,通篇没有出现主义、思想、代表、发展观等,朴实,真切,耐读,可亲;此外,相比去年,今年内容更为具体实在,并开始使用网络语言,谈中国与世界关系的部分明显增多了。字数上,连同标点,去年是760字,今年是1366字,几乎翻了一倍。

学习小组为组员独家解读习近平2015年新年贺词释放了哪些信号。明年,让我们继续与习近平一起进步,共同担当。习近平在进步,我们一样需要。(说明:2015年新年贺词、2014年新年贺词全文,请见文末)

习近平新年贺词释放5大信号

(1)向网民释放信号:你们的语言,大大我懂的

1366字的2015年新年贺词中,一瞬间在网上最广为传播的,当是如下两句。“为了做好这些工作,我们的各级干部也是蛮拼的。当然,没有人民支持,这些工作是难以做好的,我要为我们伟大的人民点赞。”没错,“蛮拼的”“点赞”都是网络语言,尤其“蛮拼的”,更是2014年新热的网络语言。此外,贺词一开头的“时间过得真快”,无疑也是对网络热词“时间都去哪儿了”的关照。

使用网络语言的习大大,无疑是在向亿万网民释放信号:你们的语言,大大我懂的。习大大十分重视网络和网民,去年有关宣传工作的“819讲话”,他谈到“网络是重中之重”;今年,在深改组的第四次会议上,他带领组员一起探讨了“报网融合”问题;十八大以来,国家互联网信息化办公室与国务院新闻办公室分家,具备了“独立人格”;今年初,中央网络安全和信息化领导小组成立,大大亲任组长,更足见其对网络的重视。重视网络,怎能不重视网民呢,重视网民怎能不懂网络语言呢?很巧妙,习大大用新年贺词向亿万网民释放了温暖的信号。

(2)向官员释放信号:这一年你们辛苦了,明年你们可能更辛苦

蓝图绘就,剩下就看干部了。习大大知道,干事,靠大家。对于2014年取得的成绩,习大大欣慰地说,“为了做好这些工作,我们的各级干部也是蛮拼的”。当然,他心里也明白,现在出现了一些“为官不为”的现象,不过整体而言,我们的干部是好的,是辛苦的,是蛮拼的。

对于2015年,习大大明白,难度可能不亚于今年。因为,“我们正在从事的事业是伟大的,坚忍不拔才能胜利,半途而废必将一事无成。我们的蓝图是宏伟的,我们的奋斗必将是艰巨的。”为此,他向各级官员提出了4句话的要求——

“我们要继续努力,把人民的期待变成我们的行动,把人民的希望变成生活的现实。我们要继续全面深化改革,开弓没有回头箭,改革关头勇者胜。我们要全面推进依法治国,用法治保障人民权益、维护社会公平正义、促进国家发展。我们要让全面深化改革、全面推进依法治国如鸟之两翼、车之双轮,推动全面建成小康社会的目标如期实现。”

(3)向腐败分子释放信号:除了被抓,你们没有第二条出路

在总结“令人难忘”的2014年时,习大大一共用了6句话,这其中1句是谈反腐败,1句是谈作风建设,共占了1/3的比例。想想,这一年千头万绪,成绩显著,却在极短的篇幅中,重点谈反腐谈作风,足见其重视程度。这两句话是,“这一年,我们着力正风肃纪,重点反对形式主义、官僚主义、享乐主义和奢靡之风,情况有了很大改观。我们加大反腐败斗争力度,以零容忍的态度严惩腐败分子,显示了反腐惩恶的坚定决心。”

研究过习大大从政履历的人都知道,他的治理思想有前后一贯性,他在浙江任省委书记期间,曾向同事们作过“从政体会漫谈”,他谈了7个词28个字,其中第一个词就是“激浊扬清”。他履新总书记后,铁腕反腐惩治四风是激浊,八项规定群众路线是扬清。自然,他在总结2014年工作时,重点又谈到激浊扬清。

对于明年,习大大更是明确地向腐败分子释放信号:除了被抓,你们没有第二条出路。因为在2015年,“我们要继续全面推进从严治党,毫不动摇转变作风,高举反腐的利剑,扎牢制度的笼子,在中国共产党领导的社会主义国家里,腐败分子发现一个就要查处一个,有腐必惩,有贪必肃。”

(4)向全国人民释放信号:牵挂你们生活,向你们致敬

人民对美好生活的向往,就是我们的奋斗目标。2012年11月15日,履新总书记首日,习大大的话掷地有声。2015年新年贺词中,习大大多次关照“老百姓”“人民”。在总结2014年成绩时,他说“许多改革举措同老百姓的利益密切相关”,又说“人民生活有了新的改善”;对于在MH370航班上失联的同胞和他们的家人,习大大没有忘记,“150多名同胞下落不明,我们没有忘记他们,我们一定要持续努力、想方设法找到他们”;此外,“云南鲁甸地震就造成了600多人遇难,我们怀念他们,祝愿他们的亲人们都安好”。而对于2015年的共同,他指出“把人民的期待变成我们的行动,把人民的希望变成生活的现实”。

向人民致敬,在新年贺词中也有极强的体现。谈到“南水北调中线一期工程正式通水”,习大大说,“沿线40多万人移民搬迁,为这个工程作出了无私奉献,我们要向他们表示敬意,希望他们在新的家园生活幸福”;对于2014年的成绩,他说,“没有人民支持,这些工作是难以做好的,我要为我们伟大的人民点赞”;对一切为国家、为民族、为和平付出宝贵生命的人们,他说,“不管时代怎样变化,我们都要永远铭记他们的牺牲和奉献”。

(5)向世界释放信号:中国关注国家前途,也关注世界前途

相比2014年新年贺词,2015年的新年贺词中,谈中国与世界关系的内容有大幅增加。这与2014年,中国主场外交和客场外交,都取得丰硕成果,新一届领导集体的外交思想更趋成熟有极大关系。

总结2014年工作时,习大大在压轴的一句中高度肯定今年的外交工作,“这一年,我们加强同世界各国的合作交往,主办了北京亚太经合组织领导人非正式会议,我国领导人多次出访,外国领导人也大量来访,这些活动让世界更好认识了中国”。

世界很大,也很小,任何一个街道的灾难,都可能影响世界多个国家人民的财产与人身安全。随着中国国力日益增强,“中国人民关注自己国家的前途,也关注世界的前途”,对此,习大大这么总结,“非洲发生了埃博拉疫情,我们给予帮助;马尔代夫首都遭遇断水,我们给予支援,许许多多这样的行动展示了中国人民同各国人民同呼吸、共命运的情怀。当前世界仍很不安宁。我们呼唤和平,我真诚希望,世界各国人民共同努力,让所有的人民免于饥寒的煎熬,让所有的家庭免于战火的威胁,让所有的孩子都能在和平的阳光下茁壮成长。”

是的,中国是世界的市场,世界也是中国的舞台。中国梦与世界更共生共荣,中国人民与世界人民一起朝着和平发展的方向努力,这个世界才会更好。(完)

​附件1:习近平主席发表二0一五年新年贺词

新华网北京12月31日电 新年前夕,国家主席习近平通过中国国际广播电台、中央人民广播电台、中央电视台,发表了二0一五年新年贺词。全文如下:

时间过得真快,2014年就要过去了,2015年正在向我们走来。在这辞旧迎新的时刻,我向全国各族人民,向香港特别行政区同胞和澳门特别行政区同胞,向台湾同胞和海外侨胞,向世界各国和各地区的朋友们,致以新年的祝福!

2014年是令人难忘的。这一年,我们锐意推进改革,啃下了不少硬骨头,出台了一系列重大改革举措,许多改革举措同老百姓的利益密切相关。我们适应经济发展新常态,积极推动经济社会发展,人民生活有了新的改善。12月12日,南水北调中线一期工程正式通水,沿线40多万人移民搬迁,为这个工程作出了无私奉献,我们要向他们表示敬意,希望他们在新的家园生活幸福。这一年,我们着力正风肃纪,重点反对形式主义、官僚主义、享乐主义和奢靡之风,情况有了很大改观。我们加大反腐败斗争力度,以零容忍的态度严惩腐败分子,显示了反腐惩恶的坚定决心。这一年,我们加强同世界各国的合作交往,主办了北京亚太经合组织领导人非正式会议,我国领导人多次出访,外国领导人也大量来访,这些活动让世界更好认识了中国。

为了做好这些工作,我们的各级干部也是蛮拼的。当然,没有人民支持,这些工作是难以做好的,我要为我们伟大的人民点赞。

这一年,我们通过立法确定了中国人民抗日战争胜利纪念日、烈士纪念日、南京大屠杀死难者国家公祭日,举行了隆重活动。对一切为国家、为民族、为和平付出宝贵生命的人们,不管时代怎样变化,我们都要永远铭记他们的牺牲和奉献。

这一年,我们也经历了一些令人悲伤的时刻。马航MH370航班失踪,150多名同胞下落不明,我们没有忘记他们,我们一定要持续努力、想方设法找到他们。这一年,我国发生了一些重大自然灾害和安全事故,不少同胞不幸离开了我们,云南鲁甸地震就造成了600多人遇难,我们怀念他们,祝愿他们的亲人们都安好。

新年的钟声即将敲响。我们要继续努力,把人民的期待变成我们的行动,把人民的希望变成生活的现实。我们要继续全面深化改革,开弓没有回头箭,改革关头勇者胜。我们要全面推进依法治国,用法治保障人民权益、维护社会公平正义、促进国家发展。我们要让全面深化改革、全面推进依法治国如鸟之两翼、车之双轮,推动全面建成小康社会的目标如期实现。

我国人民生活总体越来越好,但我们时刻都要想着那些生活中还有难处的群众。我们要满腔热情做好民生工作,特别是要做好扶贫开发和基本生活保障工作,让农村贫困人口、城市困难群众等所有需要帮助的人们都能生活得到保障、心灵充满温暖。

我们要继续全面推进从严治党,毫不动摇转变作风,高举反腐的利剑,扎牢制度的笼子,在中国共产党领导的社会主义国家里,腐败分子发现一个就要查处一个,有腐必惩,有贪必肃。

我们正在从事的事业是伟大的,坚忍不拔才能胜利,半途而废必将一事无成。我们的蓝图是宏伟的,我们的奋斗必将是艰巨的。全党全国各族人民要团结一心,集思广益用好机遇,众志成城应对挑战,立行立改破解难题,奋发有为进行创新,让国家发展和人民生活一年比一年好。

中国人民关注自己国家的前途,也关注世界的前途。非洲发生了埃博拉疫情,我们给予帮助;马尔代夫首都遭遇断水,我们给予支援,许许多多这样的行动展示了中国人民同各国人民同呼吸、共命运的情怀。当前世界仍很不安宁。我们呼唤和平,我真诚希望,世界各国人民共同努力,让所有的人民免于饥寒的煎熬,让所有的家庭免于战火的威胁,让所有的孩子都能在和平的阳光下茁壮成长。

附件2:习近平主席发表2014年新年贺词

我们即将迎来充满希望的2014年。

一元复始,万象更新。在这里,我向全国各族人民,向香港特别行政区同胞和澳门特别行政区同胞,向台湾同胞和海外侨胞,向世界各国和各地区的朋友们,致以新年的祝福!

祝福老人们健康!祝福孩子们快乐!祝福每个家庭幸福安康!

在这辞旧迎新之际,无数工人、农民、知识分子、干部仍然坚守在工作岗位,不少同胞依然奔波在世界各地为祖国辛勤工作,许多人民解放军和武警官兵、公安干警正在履行光荣使命。

他们有的远离祖国、远离亲人,有的不能同家人团聚。

我代表祖国和人民,向他们致以诚挚的问候,祝他们平安顺利!

2013年,对我们国家和人民来说是很不平凡的一年。我们共同战胜了各种困难和挑战,取得了新的显著成就。

成绩来之不易,凝聚了大家的心血和汗水。我向大家表示衷心的感谢!

2013年,我们对全面深化改革作出总体部署,共同描绘了未来发展的宏伟蓝图。

2014年,我们将在改革的道路上迈出新的步伐。

我们推进改革的根本目的,是要让国家变得更加富强、让社会变得更加公平正义、让人民生活变得更加美好。

改革是需要我们共同为之奋斗的伟大事业,需要付出艰辛的努力。

一分耕耘,一分收获。在改革开放的伟大实践中,我们已经创造了无数辉煌。我坚信,中国人民必将创造出新的辉煌。

宇宙浩瀚,星汉灿烂。

70多亿人共同生活在我们这个星球上,应该守望相助、同舟共济、共同发展。

中国人民追寻实现中华民族伟大复兴的中国梦,也祝愿各国人民能够实现自己的梦想。

我真诚希望,世界各国人民在实现各自梦想的过程中相互理解、相互帮助,努力把我们赖以生存的地球建设成为共同的美好家园。

生活总是充满希望的,成功总是属于积极进取、不懈追求的人们。

我们在前进的道路上,还会遇到各种风险和挑战。让老百姓过上更加幸福的生活,还有大量工作要做。

我们要谦虚谨慎、艰苦奋斗,共同谱写伟大祖国发展的时代新篇章。

谢谢大家。