Using CSS to make a dynamic navigation bar

We look at a lot of websites will see some sites when your mouse moved to the text of the navigation bar will feel the word moving, or the color of the font will change, or

With the underlined, look at the effect of the navigation bar on my blog you understand, today, three little to tell you how this is achieved.

In fact, this is very simple, it is actually implemented with CSS, please follow my steps to do, let ' go!

1. Enter your personal portal management, select Personal portal Settings, and select template selection, choose Custom CSS to enter.

2. Do you see some CSS code, please find the following code:

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 {}

Okay, here's the key step:

After that, add the following code:

#navi_bar a:hover{color:#000000; font-weight:bold;text-decoration:blink;background:#FF0000;font-size:18px}
#navi_bar a{display:block}

Code Description: 1.color represents the mouse to move to the color of the word, text-decoration to represent the decorative effect of the text, you can select the properties have (none to express the Super connection

There is no underline, underline is underlined, overline to the hyperlink text with a line, replaced by Line-through to the hyperlink text, blink the text in the Flash

Shuo. Background indicates the color of the mouse when it arrives. Font-size indicates the size of the font, and if you want the navigation bar to be dynamic, the font size here is larger than Navi_bar A:link

The font size in the CSS definition is 14px, so we have to choose a font larger than 14px.

2.navi_bar A{display:block} indicates that the color fills the entire table, otherwise only text can be filled.