设计与构建的亲密接触

本文分三部分讲解：

效果图与页面的差异：主要讲解页面与效果图不同的细微之处

Css3新特性：分两部分，新特性和实例部分

设计与构建：构建的趋势与现状

1.效果图与页面的差异：

1）内核小常识分享

主流内核：

Trident内核：IE，MaxThon，TT，The World，360，搜狗浏览器等

Gecko内核：Netscape6及以上版本，FF，MozillaSuite/SeaMonkey等

Presto内核：Opera7及以上

Webkit内核：Safari，Chrome等

1 Trident内核和W3C标准脱节，Trident内核的大量Bug等安全问题没有得到解决。

2 Gecko：这是Firefox 和 Flock

所采用内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。

3 Presto：Opera 采用的是 Presto内核，Presto内核被称为公认的浏览网页速度最快的内核，这得益于它在开发时的天生优势，在处理JS脚本等脚本语言时，会比其他的内核快3倍左右，缺点就是为了达到很快的速度而丢掉了一部分网页兼容性。

4 Webkit：Webkit 是 Safari 采用的内核，不过 Safari 是苹果系统下的浏览器（虽然也有windows版，但是比较少），所以只简单介绍一下这个内核的优点和缺点，优点就是网页浏览速度较快，虽然不及 Presto 但是也胜于 Gecko 和 Trident，缺点是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。

5 双核现在很多国内浏览器采用双核（IE+ Webkit），如遨游，360等

总结：根据上述内核不同，造成了页面与效果图的差异，这是其中一个原因。下面我们看下效果图与页面差异性的简单处理方法。

2）效果图与页面之间差异处理

1 引导层你为何有毛边呢

左图为：IE7 8 9 10 及火狐谷歌浏览器的输出的透明图片，右图为IE6的透明图

造成毛边我们采用的方法：

方法一：除IE6外采用PNG24位图，给IE6做张GIF图 或者PNG8的，这样处理不足之处是保证了其它浏览器，但是IE6有点毛边

方法二：我们采用IE6做滤镜用一张PNG24的，其它浏览器也是PNG24，这样处理的好处是没有毛边但是滤镜是很消内存的，一般不采用

方法三：在效果图上做点简单的改变如图：

左图是IE6右图是其它浏览器，加个底图透明，毛边问题就被隐藏起来了，肉眼很难区分

2 图标摆放小窍门

左图是原图对比调整后的图，做了简单的调整，看第一个图标（手机），如果不用红框框出来，很难辨别，

在不影响效果的情况下，我们做出了简单的改变，把图标向左移动了两像素，这样就用一套代码，不用再单独给那两像素定义样式了，图标达到居中的效果。

3 间距栅格化

看上图，间距有30px 18px 16px 13px

我们在做间距截图时，我们通常采用10px 15px 20px 25px 30px这样的规律来处理间距，达到一定的规范性，但又不影响效果

4虚线 项目符号

上面是设计出来的，下面是系统自带的，但是我们一般采用下面的，能用代码写出来就用代码，原因是文件小而灵活，比如：一张图一般几十k，但是代码的话，也许就几k。灵活性的体现：比如能很快的把虚线变成实线

不是特别强调效果时，我们也可以这么做，如上面关闭这段代码，很灵活，可以随时放大、缩小、换色等。

标签： Trident内核 Gecko内核 Presto内核 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。