Use Html+Css to implement a simple navigation bar function (the navigation bar switches the background color when the mouse is encountered)
Ⅰ. Problem description: Use html+css to implement a simple navigation bar; ⅡThe implementation process is as follows: 1. Run the software VScode, and it can be realized by personal test;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*
The above statement means: clear the outer and inner margins of the div box to prevent the system from using the default values;
The presence or absence of this statement does not affect the result much;
*/
ul {
list-style: none;
}
/*
The above statement means: cancel the default style of the ul list;
Without this statement, the results will most likely have small black dots in the navigation bar;
*/
.box {
width: 960px;
height: 40px;
margin: 100px auto;
}
/*
The above statement means: define the width of the div box to be 960px;
The height is 40px;
Centered on the screen with a 100px margin;
*/
.box ul {
overflow: hidden;
}
/*
The above statement means: set the hidden attribute for the ul box under the div box;
The hidden attribute is used to clear the possible floats of the child boxes so that the navigation bar can be set to 8 parts as required.
*/
.box ul li {
width: 120px;
height: 40px;
float: left;
font-size: 18px;
text-align: center;
font-family: "Microsoft Yahei";
line-height: 40px;
}
/*
The above statement means: set the attribute value of the child box li of the ul box of the div box;
Width is 120px;
The height is 40px;
The floating value is floating to the left;
The sub-size is 18px;
The text alignment is centered;
The text type is "Microsoft YaHei"
The line height is 40px;
*/
.box ul li a {
display: block;
background-color: #ccc;
color: #666;
text-decoration: none;
}
/*
The above statement means: set the attribute value of the child box li of the ul box of the div box;
" display: block;": turns inline elements into block-level elements;
Set the background color to "#ccc";
The font color is "#666";
Text decoration is none;
*/
.box ul li a:hover {
background-color: yellowgreen;
color: #fff;
font-weight: bold;
}
/*
The above statement means: set the attribute value of the child box li of the ul box of the div box; (set the background color change value when the mouse is placed on the navigation bar)
The background color after the change is "yellowgreen" [yellow-green];
The changed font color is "#fff" [white];
The font weight after the change is "bold" [bold];
*/
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
</body>
</html> 3. Results display:
When the mouse is placed after the first "Home" in the navigation bar:
This is the end of this article about using Html+Css to implement a simple navigation bar function (the navigation bar switches background color when the mouse is encountered). For more related html navigation bar content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! |
>>: Solve the problem of not being able to access the RabbitMQ management page in the Linux server
Recommend
Basic implementation method of cross-component binding using v-model in Vue
Hello everyone, today we will talk about how to u...
Let's talk in detail about whether setState in React is a macro task or a micro task
Table of contents Preface Is the interviewer aski...
Analysis of multi-threaded programming examples under Linux
1 Introduction Thread technology was proposed as ...
Detailed tutorial on deploying Django project under CentOS
Basic Environment Pagoda installation service [Py...
Example code for implementing card waterfall layout with css3 column
This article introduces the sample code of CSS3 c...
Example of automatic stop effect after text scrolling
The effect is very simple, just copy the following...
What does mysql database do
MySQL is a relational database management system ...
Double loading issue when the page contains img src
<br />When the page contains <img src=&qu...
Implementation of Vue counter
Table of contents 1. Implementation of counter 2....
Use of kubernetes YAML files
Table of contents 01 Introduction to YAML files Y...
Example code for using CSS to implement the style of logistics progress
Effect: CSS style: <style type="text/css&...
How to copy MySQL table
Table of contents 1.mysqldump Execution process: ...
Circular progress bar implemented with CSS
Achieve results Implementation Code html <div ...
How to configure path alias for react scaffolding
The react version when writing this article is 16...
canvas.toDataURL image/png error handling method recommendation
Problem background: There is a requirement to tak...