Javascript实现简易导航栏
更新时间:2021年06月16日 14:30:11 作者:6+3
这篇文章主要为大家详细介绍了Javascript实现简易导航栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
这篇文章主要介绍了javascript实现图片左右滚动效果,可实现自动滚动,带有左右按钮功能,基于插件scrollPic.js实现,附带了相应的demo源码供读者下载参考,需要的朋友可以参考下2016-09-09Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
这篇文章主要介绍了Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-07-07Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单),需要的朋友可以参考一下2013-06-06
最新评论