今天在测试一款
论坛风格时,感觉没什么亮点,但有一个意外的发现是在论坛首页版块名称在鼠标悬停时会移动!是不是很新奇?!于是分析对比论坛css样式文件,终于有所发现,原来是transition的功劳,又通过
搜索了解了一下它的用法。然而,这个样式有些不同,资料上说:“Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。Safari 支持替代的 -webkit-transition 属性。注释:Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。”不过,在我的360极速上显示正常,也正是因为此,才决定研究下。
下面是修改中与现在的对比图(左边的截图于版块图标替换、版块简介修改后):
注意看椭圆圈住部分。左边是原来的版块名称大小,真的不是很明显的样子(马上3年了,今天才注意到这个问题);右边是修改后的样子,字号加大(新增font-size:14px;),还有一个细节是加了下划线,并且右移了(有一个变化的过程。另外,
莘祺网的绝大部分版块名称都加了颜色,在没有加颜色的版块名称上悬停时还会加颜色的哦)。在这个修改的过程中,因为版块名称的加大,为了适应,所以重新调整了版块图标的大小由原来的50*50到54*54,而且是一个一个的调整。刚刚看了下,47个(在用的和没有使用的)。而由于版块图标的加大,“综合信息◇共同关注”、“会员报到◇风采展示”、“公司动态◇企业文化”这3个版块的版块简介因为已经达到2行所能显示的最大字数,所以变成了3行,自然又需要重新调整版块简介。
虽然前后花了不少时间,但收获还是很大的——尽管技术含量并不高:版块名称加大;版块图标和版块简介(3个)重新调整;最好玩的是鼠标悬停时版块名称会动,这个真的比较有意思,只是不知道这个样式能在多少浏览器上展示出来?反正,在我的360极速上正常。