-
说说我在WordPress 2.7中留言嵌套的样式设计
既然Js O3 beta使用了 WordPress 2.7 中原生的留言嵌套功能,我还是应该对其留言的样式好好认真一下。一般我们看到的最常见嵌套样式就是利用回复楼层的缩进以便区分,再套上边框显示。这也是我之前一直觉得嵌套样式在排版混乱的主要原因,所以我不喜欢自己主题也是这样的显示方式。
我想了一下,还是希望嵌套的样式尽量保持一层一层,却又不失与父楼层的联系。因为,其实嵌套的留言样式有一个好处就是能让其它访客知道留言的上下文,不用只看到@XXX的字样。说到这里不得不提一下在Shawn的留言中,利用JS功能把需回复留言的原内容弹出显示。这个功能我也一直想实现,只是还没来得及就给他完成了,呵呵,大家都去看看,很不错的。
言归正传,我对自己的留言样式进行了修改:增加了父子留言之间连线显示,效果就如一些电脑程序中的文件管理显示方式,象下图:

连线的实现在CSS中并不难。对于第一层的连线,需要的只是对.commentlist li.depth-2的样式设置border-top属性,但不设置margin-left,而改为对其设置padding-left实现文字的缩进;当然avatar头像只是简单的margin-left则可以了。
而对于第二层的回复,因为需要增加连线连接第一层回复的头像处,这个我觉得并不好实现。尝试过的方法是利用float属性浮动第二层,然后把留言内容利用margin-top压下,连线则为.commentlist li.depth-3的border-left和border-bottom,但这样根本不行,放弃。
然后想到利用该层中avatar头像的这个DIV进行:现在的方法是利用.commentlist li.depth-3 .avatar(回复二层的头像DIV)的border-left和border-bottom实现连线;然后把.commentlist li.depth-3 .avatar .img这个图片进行float浮动,并利用padding将其设计到需要的位置处;至于每二层回复的顶部连线同第一层连线的设计,通过对.commentlist li.depth-3的border-top属性则可以实现。
在上面的设计方法中,虽然我没有把具体的样式代码写出,但上面的文字解释相信懂得的CSS的各位应该能看得个明白。其实这样的设计目前只能在IE7和FF下实现,失败的地方依然是万恶的IE6,由于用到padding的属性,而padding在IE6的使用总是有这样那样的问题。不信大家可以在IE6下看下效果,一点也不好。
写这篇文章的主要目的其实是想看下大家对这个样式在IE6下的显示问题有没有解决的办法可以告诉一下我,因为我并不想通过IE6的hack代码进行修正,却又被迫放弃W3C的通过,很是茅盾矛盾哦;再者,如果大家有看过一些值得参考的嵌套样式,不妨给我留个地址,让我也多学习学习,谢了。
34 条评论于 “说说我在WordPress 2.7中留言嵌套的样式设计”
The trackbacks and pingpacks:
- WordPress 2.7中留言嵌套的样式设计 at WordPress Today - Pingback on 09/01/22 01:25
正在读取……
产品宣传
相关文章
最近文章
- WordPress主题中头部图片自定义功能的实现 (34)
- 由主题作者链接引起的小故事 (37)
- WordPress主题Js O4w更新至1.1.4版本 (37)
- 潮死了 (43)
- 年是过得差不多了 (26)
- 收到10美刀的主题捐赠 (55)
- 再见桃花时 (25)
- 发布WordPress主题Js O4w的春节样式-花开富贵 (58)
- 黑莓8900官方OS5.0系统的使用感受 (53)
- WordPress主题与《命中注定我爱你》 (43)
- 当我的RSS订阅数超过1000时 (47)
- 这十天 (19)
- Google就象初恋,哪怕离开了却不能忘 (35)
- Hey, begin my long vocation (44)
- 回眸卢浮 (27)
简体中文