设计与构建的亲密接触

2012-12-28 11:06 稿源:pmtoo.com  0条评论

本文分三部分讲解:

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

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。灵活性的体现:比如能很快的把虚线变成实线

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

有好的文章希望站长之家帮助分享推广,猛戳这里我要投稿

相关文章

相关热点

查看更多