本文实例为大家分享了Javascript实现简易导航栏的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>导航</title>
</head>
<style>
button{
width:80px;
height:25px;
border:none;
}
#b1{
background-image: url('1.png');
margin-right:0px;
}
#b2{
background-image: url('1.png');
width:380px;
height:25px;
text-align: left;
}
#b1:hover{
background-image: url('2.png');
}
#b2:hover{
background-image: url('2.png');
}
</style>
<body>
<div style="width: 800px;margin:0px auto">
<div>
<img src="1.jpg" width="100%" height="150px%">
</div>
<div>
<div style="font-size: 1px">
<button type="button" id="b1">网站首页</button>
<button type="button" id="b1">网站新闻</button>
<button type="button" id="b1">网站趣闻</button>
<button type="button" id="b1">网站论坛</button>
<button type="button" id="b1">网站介绍</button>
<button type="button" id="b2">招纳贤士</button>
</div>
</div>
</div>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- JS 实现导航栏悬停效果
- JavaScript实现鼠标点击导航栏变色特效
- Fullpage.js固定导航栏-实现定位导航栏
- JavaScript实现滑动导航栏效果
- JS滚动到指定位置导航栏固定顶部
- js导航栏单击事件背景变换示例代码
- 一步步教大家编写酷炫的导航栏js+css实现
- JS 实现导航栏悬停效果(续)
- JavaScript NodeTree导航栏(菜单项JSON类型/自制)
- 原生JS实现 MUI导航栏透明渐变效果
本文由 华域联盟 原创撰写：华域联盟 » Javascript实现简易导航栏
转载请保留出处和原文链接：https://www.cnhackhy.com/71157.htm
