您的位置:首页技术文章
文章详情页

Javascript实现简易导航栏

【字号: 日期:2023-06-02 10:11:49浏览:4作者:猪猪

本文实例为大家分享了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='https://www.haobala.com/bcjs/1.jpg' 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
相关文章: