Jul 18 2008
圆角的一点思考
这段时间,友商网完成了第三次改版,收获了很多,挑其中的一点稍稍的进行了“深入思考比较学习分析研究参悟理解”。啰嗦的话说完了,正题……
应该不难发现,在目前的各大网站中,大量的采用了圆角去修饰边框,使得页面的呈现更加柔和,干净舒服。所以,友商网在这一次改版中也大量采用了这个样的设计,特别是二级页面的大部分元素框,就采用了时尚的银灰色调配上灰黑的圆角。在将设计稿实现成页面的时候,这个地方开始的确让我头疼,因为这些元素有很多相似的特点,也有一些不一样的地方,相似的是:
title是银灰色渐变x轴横向

底部圆角内凹度一样
而不一样的地方是,整个元素框宽度不一定一样,title高度也有两种,在看到绝大部分的频道设计稿后,我决定将这些元素框做成通用的结构和样式,希望能提高开发效率,省去了一次次重复的调试,也有利于不用的前端开发同事统一风格,整体提高开发速度。
实现的思想是这样的(可以说主要是滑动门的应用):
1.将title的银灰条进行分离(其实也可以合在一起),作为两个结构元素(分别是h2和span)的背景,进行适应的拉伸


