HJin.me 黄金一博

没有几天就要春节了，话说本来打算做一款红色迎新年和一款绿色春天的模板，但是自己懒，最后决定，跳过新年了，直接春天！

这一款模板的制作成功，算是我到目前为止，自己做的最好的一款了。图片自己找的，配色自己挑的。制作的过程中，还受到了Tension 和 iMoe 的指导，一夜时间很快就过去了，自己的新模板有出炉了。挂上Google Adsense，新皮肤正式使用哦。

想来想去，自己一个人花了一夜做的模板，而且由是单栏的，就叫她 one in spring 吧！

校内上面，无聊，伪装了一个星级用户。以前提供的代码只能够在自己的页面显示出自己是星级的。现在的代码换了个容器来显示星星和紫豆。不过，这段代码使用了负边距，可能在IE6下面显示不正常。那个就不在我的考虑范围内了。

只需要在涂鸦板里面加上后文的极端代码就可以了。没有星星的或者想装有钱的，可以试试这些代码。

.profile-tabs-holder .count { 
background:transparent url(http://xnimg.cn/imgpro/icons/star.gif) no-repeat scroll left center; 
font-size:12px; 
margin:0 2px; 
padding-left:38px; 
} 
.profile-tabs-holder .count .count { 
background:transparent url(http://xnimg.cn/imgpro/icons/vip_l.gif) no-repeat scroll 0 0; 
margin-left:-35px !important; 
padding-left:35px; 
text-indent:35px;
} 
.profile-tabs-holder img { 
display:none; 
} 

PS：12月28日修正了一下，针对IE7，效果修改了一下，把padding-left换成了text-indent，因为IE7好像background是从padding里面开始算的。不过IE6的负边距问题还是没有想到解决方法。不知有没有高手指导。

看了别人的介绍，自己也在博客上面弄了一个正在载入的表示，虽然没有jQuery的好看的特殊效果，能用就行了。

或许这个就叫做用户体验设计吧，这样对用户来说，使用的感觉更好一些。

至于实现loading...的方法很多，网上自己谷歌吧，我这里就不说了。

说实话，互联网上面的类似文章很多了。写这篇文章纯属是把自己的经验记录下来，以后方便自己查找啦。

css图片替换文字有两种方法

display:none;  
text-indent:-9999em;  

先说第一种方法，这个是用的比较早的一种方式，使用方法如下，例如我要替换一个超链接。

<a href="#"><span>待替换的链接</span></a> 

对应的CSS就是

a {background:url(....); display:block; width:100px; height:100px; }/*关于a标签的伪类就自己添加*/ 
span {display:none; } 

这样的方式就是需要多用一个标签。给a设置好背景图片，并且设置显示为块状对象，并且指定高宽，然后span指定文字不显示。

第二种方式相对来说简单一些，只需要一个标签

<a href="#">待替换的链接</a> 

CSS代码

a { display:block; width:100px; height:100px; overflow:hidden; text-indent:-9999em; background:url(...);}  

其效果就是把a变成指定高宽的块状对象，然后设置溢出的内容不显示，然后设置文字缩进-9999em，这样文字就到显示的范围外了，最后指定背景。

当初自己用第二种方法的时候，经常会出现在FF下面点击链接，结果会产生一个向左延长虚线框，这个是因为没有设置overflow:hidden;的缘故。

NetPuter 说...

建议使用text-indent:-9999em;而不是display:none;
因为后者对搜索引擎不太友好~

自己总结了一下自己在设计 CSS 过程中学会的和用过的 CSS hack 技术。相信看这篇文章的都不会是 CSS 白痴，所以 css 是层叠样式表我就不说了。

至于文中的 CSS hack 技术，要么是我从书上看到的，要么就是在学习别人的网站的 CSS 的时候发现的。

方法一：*和!important

IE都支持*，IE6 不支持 !important，firefox不支持 *

举例说明：

color:#FFFFFF;/*FF显示的效果  */ 
*color:#EE7EE7!important;/*IE7显示的效果  */ 
*color:#EE6EE6;/*IE6显示的效果  */ 

叠放顺序必须如此，可以从中去掉某个。

方法二：+和-

IE7可以认+，IE6可以认-

举例说明：

color:#FFFFFF;/*FF显示的效果  */   
+color:#EE7EE7;/*IE7显示的效果  */   
-color:#EE6EE6;/*IE6显示的效果  */   

方法三：居然是针对Firefox的 hack

Firefox对于 i 会转换成为 i ，所以对于width, heigh, margin 等包含字母 i 的参数都可以用这套方法。

举例说明：

width:30px;/*非FF的显示效果*/ 
width:25px;/*FF的显示效果*/ 

有了这三种方法，一般的 hack 问题都能够解决。学习和制作 CSS 中继续总结心得。