js简易导航栏 Javascript实现简易导航栏
6+3 人气:0想了解Javascript实现简易导航栏的相关内容吗,6+3在本文为您仔细讲解js简易导航栏的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js,导航栏,下面大家一起来学习吧。
<!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>
效果图:
加载全部内容