导航制作

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)
}
}
};

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 2,048评论 0赞 1
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,400评论 1赞 10
  • 《ijs》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 5,836评论 0赞 7
  • 2018年1月14日星期日晴 今天早晨孩子早早起床穿好舞蹈服准备去跳舞。我一...
    陈怡彤妈妈阅读 249评论 0赞 0
  • 面對未知的過去 總是忐忑不安 關於未來的我 是幸福的嗎? 身邊的人 是現在的他嗎? 如果不是 我會如果走出那陰霾?...
    栀子花_阅读 227评论 0赞 0

友情链接更多精彩内容