• 8381阅读
  • 95回复

2014年1月31日:修改论坛首页版块名称大小及悬停样式 [复制链接] [手机版]

上一主题 下一主题
离线为你守候
温馨家园,为你守候!

只看楼主 倒序阅读 使用道具 绿 楼主  发表于: 2014-01-31 21:04:04 星期五
—— 管理操作 •  本帖被 为你守候 从 论坛管理◇家园服务 移动到本版块(2014-03-02) ——
今天在测试一款论坛风格时,感觉没什么亮点,但有一个意外的发现是在论坛首页版块名称在鼠标悬停时会移动!是不是很新奇?!于是分析对比论坛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极速上正常。
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线为你守候
温馨家园,为你守候!

只看该作者 沙发  发表于: 2014-01-31 21:23:13 星期五  点亮(0)
3年前的2011年2月3日,也是大年初一,莘祺网的今生开始了(但那个时候并不叫莘祺网)。
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线为你守候
温馨家园,为你守候!

只看该作者 板凳  发表于: 2014-01-31 21:26:47 星期五  点亮(0)
我说怎么在本版找不到这个主题呢,原来是发错版块了。
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线为你守候
温馨家园,为你守候!

只看该作者 地板  发表于: 2014-01-31 23:50:50 星期五  点亮(0)
版块名称调整好后,又想把分区名称(如上面的“玫琳凯-丰富女性人生”)的大小调整下。可测试时出了点儿问题:当把字号加大后,背景出现了一条白线(蓝箭头所指。绿线框处为原来大小,左侧为现在的大小):

但同样的代码在“绿色榕树”风格下正常,于是反复调整,可还是找不到原因。后来,突然想到是不是背景图片的事儿呢?于是到风格图片文件夹去查看,果然背景图是200*29的png文件,它的下面有白边儿,用截图软件把下面1px 宽的白边儿截掉后替换原图,终于正常了!大小由原来的267字节变成了938字节,变化够大的哦!后来,不放心,又用ps重新处理了下,还是200*28,这回变成了3.59k,变化更大!不过,用IE测试,之前修改过的图片显示正常,也就没再替换。
就为这,2个多小时啊!不过,对比下显示效果,还是值得的。
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线为你守候
温馨家园,为你守候!

只看该作者 4楼 发表于: 2014-02-01 00:07:42 星期六  点亮(0)
用IE8测试,“移动”效果是可以正常显示的,不过和360极速有些差别:同样是没有加颜色的版块名称,在360极速下鼠标悬停时显示附加的颜色,在IE8下显示七彩颜色(之前添加的链接效果)。
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线为你守候
温馨家园,为你守候!

只看该作者 5楼 发表于: 2014-02-01 00:13:06 星期六  点亮(0)
刚刚发现,在IE8下链接七彩变化效果显示正常,360极速就没效果了。
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
在线zhangjingyu

只看该作者 6楼 发表于: 2014-02-01 08:39:30 星期六  点亮(0)
科诺手机测试,与360极速基本相同(当然是电脑版了)。只是在手机上没法悬停,那就点住看效果(#∩_∩#)点击后,在页面打开前也可以看到效果。

——本帖通过[莘祺网手机版]回复.
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线YAWELL

只看该作者 7楼 发表于: 2014-02-01 20:51:47 星期六  点亮(0)
哈哈,新年快乐啊,景玉兄
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线为你守候
温馨家园,为你守候!

只看该作者 8楼 发表于: 2014-02-02 10:04:26 星期日  点亮(0)
回 YAWELL 的帖子
YAWELL:哈哈,新年快乐啊,景玉兄 (2014-02-01 20:51) 

昨天两个连桥儿在这边吃饭,结果我喝多了,晚上没上网。
新年快乐,兄弟,想你们!
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线为你守候
温馨家园,为你守候!

只看该作者 9楼 发表于: 2014-02-02 10:06:02 星期日  点亮(0)
刚刚重新做了一个版块图标(右边是现在的):

护肤彩妆◇培训促销 http://www.vtu425.com/thread-htm-fid-44.html
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!