利用CSS制作动感导航栏

利用CSS制作动感导航栏内容简介：我们在浏览很多网站的时候会看到有的网站当你的鼠标移动到导航栏的文字上的时候会感觉字在动，或则字体的颜色会变，或则 有上划线，看看我的博客上导航栏的效果你的明白了，今天三少就来告诉大家这是怎么样实现的。 其实这个 我们在浏览很多网站的时候会看到有的网站当你的鼠标移动到导航栏的文字上的时候会感觉字在动，或则字体的颜色会变，或则

有上划线，看看我的博客上导航栏的效果你的明白了，今天三少就来告诉大家这是怎么样实现的。

其实这个很简单，它实际上是用CSS来实现的，请跟着我的步骤做，Let' Go!

1.进入你的个人门户管理，选择个人门户设置，然后选择模版选择，选择自定义CSS进入。

2.你是不是看到了一些CSS代码呢，请找到下列代码：

body{

margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 956px;
background-color: #336666;
font-size: 12px;
color: #666666;

}#navi_bar a:link {
/*导航条文字颜色*/
}#navi_bar a:visited {}

好了下面的是关键的步骤：

在这后面加入下面的代码：
#navi_bar a:hover{color:#000000; font-weight:bold;text-decoration:blink;background:#FF0000;font-size:18px}
#navi_bar a{display:block}


代码说明：1.color 表示鼠标移动到字上的颜色，text-decoration 表示文字的修饰效果，可以选择的属性有（none 表示超连

接没有下划线，underline则有下划线，overline则给超连文字加上划线，换成line-through给超连文字加上线， blink则使文字在闪

烁。）background 表示鼠标到达时的颜色。font-size 表示字体的大小，如果要让导航栏有动感，这里字体大小要比navi_bar a:link

中的字体要大，在CSS定义中的字体大小是14px，所以我们要选择比14px大的字体。

2.navi_bar a{display:block}表示颜色填充满整个表格，否则只能填充文字。