IT博客-我们思考IT-随笔分类-Csshttp://www.cnitblog.com/wmskyer/category/5803.html用程序感受人生,生活就有滋有味zh-cnTue, 27 Sep 2011 09:57:16 GMTTue, 27 Sep 2011 09:57:16 GMT60competitious的美化按钮http://www.cnitblog.com/wmskyer/archive/2007/07/23/30467.htmlwmskyerwmskyerMon, 23 Jul 2007 06:05:00 GMThttp://www.cnitblog.com/wmskyer/archive/2007/07/23/30467.htmlhttp://www.cnitblog.com/wmskyer/comments/30467.htmlhttp://www.cnitblog.com/wmskyer/archive/2007/07/23/30467.html#Feedback0http://www.cnitblog.com/wmskyer/comments/commentRss/30467.htmlhttp://www.cnitblog.com/wmskyer/services/trackbacks/30467.html
上面这个图片是read more链接a:与a:hover的2种状态图
当为a:时，css取图片高度的一半，原图为38px，则取height:19px，链接显示的就是截至到高度为19px的图
当为a:时，css将背景下移19px，取下面的图片 background-position:0px,-19px
a:时需要定义的状态有
display:block;
background:url(图片地址);
width:65px;height:19px 
以下两图同理

另外需要补充的是，在html中为了方便阅读，可以在需要显示read more的地方加上<span>read more</span>
然后定义span{display:none}就可以了





wmskyer 2007-07-23 14:05 发表评论
]]>