我們在瀏覽很多網站的時候會看到有的網站當你的滑鼠移動到導覽列的文字上的時候會感覺字在動,或則字體的顏色會變,或則
有上劃線,看看我的部落格上導覽列的效果你的明白了,今天三少就來告訴大家這是怎麼樣實現的。
其實這個很簡單,它實際上是用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則使文字在
閃爍
。font-size 表示字體的大小,如果要讓導覽列有動感,這裡字體大小要比navi_bar a:link
中的字體大,在CSS定義中的字體大小是14px,所以我們要選擇比14px大的字體。
2.navi_bar a{display:block}表示顏色填入整個表格,否則只能填入文字。