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;
**Requirement: **Divide the navigation bar into eight small parts, and when you put the mouse on it but don't click it, the background color of the navigation bar will be displayed as yellow-green;

ⅡThe implementation process is as follows:

1. Run the software VScode, and it can be realized by personal test;
2. Run the code:

<!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:
Before releasing the mouse:

insert image description here

When the mouse is placed after the first "Home" in the navigation bar:

insert image description here

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!

<<: MySQL statement summary

>>: Solve the problem of not being able to access the RabbitMQ management page in the Linux server