导航制作

css

list-style: none;//消除列表前面的点

text-decoration: none;//消除下划线

display: block;//将行内元素改为块状元素

height: 30px; line-height: 30px;//设置文字上下居中

text-align: center;//文本水平居中

text-indent: 10px;//缩进段落的第一行

a:hover;//选择鼠标指针浮动在其上的元素，并设置其样式：

选择未访问、已访问、悬浮和活动链接，并设置它们的样式：
a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:red;}
a:active {color:yellow;}

js

水平伸缩代码

window.onload = function () {
var aA = document.getElementsByTagName('a');
for (var i = 0; i < aA.length; i++) {
aA[i].onmouseover = function () {
clearInterval(this.time);
var This = this;
This.time = setInterval(function () {
This.style.width = This.offsetWidth + 8 + "px";
if (This.offsetWidth >= 160) {
clearInterval(This.time)
}
}, 30)
};
aA[i].onmouseout = function () {
clearInterval(this.time);
var This = this;
This.time = setInterval(function () {
This.style.width = This.offsetWidth - 8 + "px";
if (This.offsetWidth <= 120) {
This.style.width = "120px";
clearInterval(This.time)
}
}, 30)
}
}
};