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
How to Find the Execution Time of a Command or Process in Linux
On Unix-like systems, you may know when a command...
Vue realizes price calendar effect
This article example shares the specific code of ...
Detailed explanation of views in MySQL
view: Views in MySQL have many similarities with ...
Why is it not recommended to use an empty string as a className in Vue?
Table of contents Compare the empty string '&...
The use of mysql unique key in query and related issues
1. Create table statement: CREATE TABLE `employee...
Teach you how to enable the Linux subsystem of Win10 (with detailed pictures and text)
Today I will introduce how to enable the Linux su...
How to query data within a certain period of time with Vue front-end and Django back-end
Preface During the development process, you will ...
Linux kernel device driver address mapping notes
#include <asm/io.h> #define ioremap(cookie,...
How to optimize MySQL indexes
1. How MySQL uses indexes Indexes are used to qui...
Let's talk about what JavaScript's URL object is
Table of contents Overview Hash Properties Host p...
Telnet is moved to busybox-extras in Alpine image
The telnet in the Alpine image has been moved to ...
Detailed explanation of built-in methods of javascript array
Table of contents 1. Array.at() 2. Array.copyWith...
How to add shortcut commands in Xshell
As a useful terminal emulator, Xshell is often us...
Nginx uses ctx to realize data sharing and context modification functions
Environment: init_worker_by_lua, set_by_lua, rewr...
Detailed explanation of building MySQL master-slave environment with Docker
Preface This article records how I use docker-com...