的定位不同于门户网站，没有浩瀚如海的信息量，因此应在有限的首页空间里将产品更好的展示出来。
旧版印像派的三栏布局从视觉上看起来拥挤混乱，在短时间内难以将注意力集中在重点区域，用户无法清晰地跟随页面节奏进行有效浏览。因此我们需要量体裁衣，针对网站的定位和容量进行重新梳理，选择适合的页面布局。
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' class="alignnone size-full wp-image-9384" alt="" width="625" height="460" src="/uploadfile/201301/12/4F122733544.jpg" />
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' class="alignnone size-full wp-image-9373" alt="" width="625" height="655" src="/uploadfile/201301/12/58122733453.jpg" />
5.banner轮播
通过下图可以看出老版的banner轮播样式的操作不够人性化，当前帧和其他帧距离太远，来回点击成本略高。
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' class="alignnone size-full wp-image-9385" alt="" width="625" height="391" src="/uploadfile/201301/12/63122733319.jpg" />
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' class="alignnone size-full wp-image-9386" alt="" width="625" height="283" src="/uploadfile/201301/12/FC122733953.jpg" />
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' class="alignnone size-full wp-image-9387" alt="" width="625" height="352" src="/uploadfile/201301/12/51122733670.jpg" />
以上是前端工程师GG给我看chrome/IE6浏览器下的轮播样式测试效果，发现这2个浏览器都无法完全支持视觉稿的轮播效果，而且高级浏览器和IE6下的样式差异很大，这确实是一件让人郁闷的事情。头疼之余，先让我们看看其他网站的轮播是怎么兼容多种浏览器的：
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' class="alignnone size-full wp-image-9392" alt="" width="625" height="319" src="/uploadfile/201301/12/D6122733966.jpg" />
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' class="alignnone size-full wp-image-9393" alt="" width="625" height="445" src="/uploadfile/201301/12/30122733193.jpg" />
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' class="alignnone size-full wp-image-9416" alt="" width="625" height="385" src="/uploadfile/201301/12/6B122734666.jpg" />
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' class="alignnone size-full wp-image-9395" alt="" width="625" height="302" src="/uploadfile/201301/12/65122734196.jpg" />
![]()
498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' class="alignnone size-full wp-image-9409" alt="" width="625" height="756" src="/uploadfile/201301/12/D9122734707.jpg" />
最后，欢迎大家访问印像派：yxp.163.com
原文链接：http://uedc.163.com/9320.html