当前位置: 代码迷 >> HTML/CSS >> CSS制造:开心网“发表观点”CSS实现
  详细解决方案

CSS制造:开心网“发表观点”CSS实现

热度:153   发布时间:2012-09-13 09:51:52.0
CSS制作:开心网“发表观点”CSS实现

中秋放假,淋漓小雨下了三天,这种天气最适合看电影、玩游戏、睡觉。害的眼睛都发炎了,刚去医院看了看,回到家里看博,觉的用css实现开心网标签观点的博文不错,就自己按照自己的思路,给制作了一下:


制作思路:外面的层控制宽度,内容层控制padding和border,这样栏目在后期的维护或修改只要修改外层的宽度,实用寿命更长。

?

li  浮动;
a标签  控制字符、设置display:inline-block、相对定位;
span class="now"  默认为不显示,当鼠标hover,绝对定位显示观点字符全部;
small  选用这个标签,是觉的now为主,它应该为副,可商讨;
span class="triangle"  三角形的层 绝对定位于右边;

整个li只有small为宽度,其它的于定位来现实。为什么用不float:left;来实现,是考虑到li设置为左浮动。?

?

短评文字个数超过一定的长度,后面一些文字会被省略,以三角形式呈现。鼠标经过,则显示完整的文字内容,三角消失:


?您可以狠狠地点击这里:开心网“发表观点”CSS实现

?

为了显示的需要,我们需要两段文字内容,一段是截取字符版,用做默认的显示;另外一段就是完整的文字内容,用做鼠标经过的显示。文字的截取由后台控制与输出,我们前台不予以担心与考虑。

?

我共分为九种颜色样式,每一种用不同的类来加载,前七个为重点,后两个为次显示,随着赞同观点点击,越排在前面,后台只需判断赞同观点的点击量,而来加载样式,这点应该也很容易实现。


?

为了兼顾IE6下的hover效果,最外层标签需要是a标签。hover上去显示完整文字借助的absolute绝对定位实现的,设置层高为11,也就是让上面遮罩住下面的span。

三角形用字符实现,这点就觉的很舒服,减少图片的应用,而且在各个浏览器支持的也蛮好,直接可以使用css的color属性控制颜色。

?

我又根据张鑫旭的思路,做出下面“更多”旁边的那个三角,这种方法,比用border做出来要兼容的好。


?

  相关解决方案