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

Use Html+Css to implement a simple navigation bar function (the navigation bar switches the background color when the mouse is encountered)

Ⅰ. Problem description:

ⅡThe implementation process is as follows:

What is web design

How to implement Nginx configuration detection service status

How to create a web wireframe using Photoshop

How to add java startup command to tomcat service

In-depth understanding of MySQL global locks and table locks

CSS style reset and clear (to make different browsers display the same effect)

Talk about nextTick in Vue

How to deploy Rancher with Docker (no pitfalls)

jQuery implements accordion small case

Steps for Django to connect to local MySQL database (pycharm)

Recommend

Design a data collector with vue

WEB Chinese Font Application Guide

Vue implements real-time refresh of the time display in the upper right corner

Detailed explanation of JavaScript error capture

A brief analysis of the underlying principles of MySQL transactions and isolation levels

VMware and CentOS system installation method to reset the root password

JS realizes the case of eliminating stars

Detailed explanation of importing/exporting MySQL data in Docker container

Screen command and usage in Linux

XHTML 2.0 New Features Preview

Analysis of the causes of accidents caused by Unicode signature BOM

Solution to the problem that a Linux modification of MySQL configuration does not take effect

MySQL 5.7.17 installation and configuration method graphic tutorial under win7

Exploring the use of percentage values in the background-position property

How to install Zookeeper service on Linux system