HTML开发——项目心得（CSS实现导航栏选项卡炫酷渐变效果以及图片替换文本显示）

1.首先来谈谈实现某个元素渐变的基本代码格式——[E]：hover

  通过在元素后加：hover我们可以实现元素[E]在鼠标经过时所要表现的效果；比如我们对元素a进行设置：

a{
  color:black;
  font-size:13px;
}
a:hover{
  color:red;
  font-size:15px;
}

在鼠标经过以前，元素a的内容表现为字体颜色为黑色，大小为13px ，当鼠标经过元素a上方时，元素a的内容变为字体颜色为红色，大小为15px ；

2.然后明白了hover的基本用法后我们来谈谈具体的例子：

   首先来看看我们要实现的效果：

鼠标经过前：

鼠标经过About Us后：

还挺炫酷的吧，但这要怎么实现的呢？

接下来我们来看看实现这个效果的代码段：

#nav ul li a.aboutus{
	height: 45px;
	width: 144px;
	 background: url(../images/index_9.gif) no-repeat;   /*鼠标经过以前的背景图*/
	 display: block;
	text-indent: -9999px;  /* 使该文字缩进到看不见 */ 
}

/* 实现变色的效果 */
#nav ul li a.aboutus:hover{
	background: url(../images/index_9_1.gif) no-repeat;  /*鼠标经过以后的背景图*/
}

其实就是利用hover把背景图置换了一下（这里得感谢我们的设计师了），现在来看看这两张图片长啥样的吧：

到这里相信你已经知道了些什么，网页设计师都是些机灵鬼，最爱使用这种障眼法“瞒天过海”了，哈哈。

3.我们再来谈谈用图片或背景图替换文字的一些技巧

 首先思考一下为什么需要用图片去替换文字呢？相信你也曾浏览过一些令人耳目一新的网页，页面非常漂亮，字体非常优美。。。他们是怎样做的呢？其实就是使用了我们接下来要说的方法。对于有些字体可能网页设计师电脑里装了，但用户电脑里没装，那这个字体的效果就没法显示了。再想想，每台电脑都可以显示图片的啊，为了让所有用户都能享受视觉盛宴，我们只要把这一区域替换成图片背景来显示不就好了！好，说做就做，具体的实现方法如下：

在这里我们要利用一个css属性 display：none; 就是不让文本显示。通常的做法是用一个<span></span>标签来包含所要隐藏的字体然后在<span></span>标签的外面再包含一个标签比如h标签 ，div...在css中我们设置span为隐藏，再设置h或div...的宽高，以及背景图片。看如下代码段：

html代码：
<h1><span>我的心情</span></h>

css样式：
span{
display:none:
}
h1{
height:30px;
width:50px;
background:url(images/moon.jpg) no-repeat;  /*这张图片的宽高为50px ，30px*/
}

通过css设置后 文字就会被隐藏起来，而看到的就只是背景图片了。

还有一种也是比较常用的做法，那就是把文字缩进到用户看不到的地方。使用text-indent:-9999px;把文字弄到一个看不见的地方，这样的做法比上面可能还要简单些，使用这种方法我我就不用再刻意地去加一个<span></<span>标签来实现隐藏的效果的，因为文字实际上还存在啊。如果明确用display:none去标明了这个文字不显示，那么这块区域的大小也就为0了，那么背景图片插了也白查了，大小为0，没法显示出来欸。但后面这就不一样啦，文字还在呢，只是被缩进到一个你看不到的地方去了，这不就正好的么，又有机会可乘了！

上面的那个渐变效果的实例就运用了这种方法，代码如下：

html代码：
<li >
<a href="###" class="aboutus">aboutus</a>
</li>

css代码：
#nav ul li a.aboutus{
	height: 45px;
	width: 144px;
        background: url(../images/index_9.gif) no-repeat;
	display: block;
	text-indent: -9999px;  /* 使该文字缩进到看不见 */ 
}