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

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

Recommend

Docker configuration Alibaba Cloud image acceleration pull implementation

Today I used docker to pull the image, but the sp...

Implementation steps for installing Redis container in Docker

Table of contents Install Redis on Docker 1. Find...

CSS Sticky Footer Implementation Code

This article introduces the CSS Sticky Footer imp...

How to find the my.ini configuration file in MySQL 5.6 under Windows

Make a note so you can come back and check it lat...

Detailed explanation of Tomcat directory structure

Table of contents Directory Structure bin directo...

Attributes in vue v-for loop object

Table of contents 1. Values ​​within loop objects...

Some summary of MySQL's fuzzy query like

1. Common usage: (1) Use with % % represents a wi...

Linux installation MongoDB startup and common problem solving

MongoDB installation process and problem records ...

How InnoDB cleverly implements transaction isolation levels

Preface In the previous article Detailed Explanat...

An article to understand operators in ECMAScript

Table of contents Unary Operators Boolean Operato...

How to install Docker on Windows 10 Home Edition

I recently used Docker to upgrade a project. I ha...

MySQL 8.0.23 Major Updates (New Features)

Author: Guan Changlong is a DBA in the Delivery S...

Common Linux English Error Chinese Translation (Newbies Must Know)

1.command not found command not found 2. No such ...

Things about installing Homebrew on Mac

Recently, Xiao Ming just bought a new Mac and wan...

Detailed code of the example of downloading the docker installation package from yum and installing it on an offline machine

1. On a networked machine, use the default centos...