Javascript implements simple navigation bar
|
This article shares the specific code of Javascript to implement a simple navigation bar for your reference. The specific content is as follows
<!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>Navigation</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">Homepage</button>
<button type="button" id="b1">Website News</button>
<button type="button" id="b1">Website Fun</button>
<button type="button" id="b1">Website Forum</button>
<button type="button" id="b1">Website Introduction</button>
<button type="button" id="b2">Recruit talents</button>
</div>
</div>
</div>
</body>
</html>Effect picture:
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Mysql Workbench query mysql database method
>>: KTL tool realizes the method of synchronizing data from MySQL to MySQL
Recommend
Vue+ECharts realizes the drawing of China map and automatic rotation and highlighting of provinces
Table of contents Achieve results Complete code +...
MySQL string splitting operation (string interception containing separators)
String extraction without delimiters Question Req...
Implementation steps for installing RocketMQ in docker
Table of contents 1. Retrieve the image 2. Create...
Detailed explanation of this pointing problem in JavaScript
Preface The this pointer in JS has always been a ...
Detailed explanation of how to install MariaDB 10.2.4 on CentOS7
CentOS 6 and earlier versions provide MySQL serve...
CSS3 realizes the effect of triangle continuous enlargement
1. CSS3 triangle continues to zoom in special eff...
Solution to MySQL failure to start
Solution to MySQL failure to start MySQL cannot s...
About if contains comma expression in JavaScript
Sometimes you will see English commas ",&quo...
Docker builds CMS on-demand system with player function
Table of contents text 1. Prepare the machine 2. ...
How to use limit_req_zone in Nginx to limit the access to the same IP
Nginx can use the limit_req_zone directive of the...
CSS3 animation – steps function explained
When I was looking at some CSS3 animation source ...
How to use native JS to implement touch sliding monitoring events
Preface I wrote a small demo today. There is a pa...
JavaScript implements simple calculator function
This article example shares the specific code of ...
Where is the project location deployed by IntelliJ IDEA using Tomcat?
After IntelliJ IDEA deploys a Javaweb project usi...
WeChat Mini Programs Implement Star Rating
This article shares the specific code for WeChat ...