The third day of learning CSS, no js to achieve small dynamic effects (entertainment)

Good evening, it's very late, I really like late night, no one disturbs you at this time, as if the world is yours, I learned CSS for a few days, and today I went to Tmall to see a small special effect. So it's like trying to combine what you've learned so far. The mouse motion effect here is mainly realized with the help of pseudo-class selectors, so js is not used. Well, let's take a look at the effect first, and open it! ! !
insert image description here

There are other websites on the left side of Tmall that often appear:
insert image description here

1.html structure

unordered list

<!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>案例</title>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">我的</a></li>
            <li><a href="#">动态</a></li>
            <li><a href="#">留言</a></li>
            <li><a href="#">友链</a></li>
            <li><a href="#">反馈</a></li>      
        </ul>
    </div>    
</body>
</html>

2. CSS section

1. Clear the influence of the body

*{
    
    
     margin: 0;
     padding: 0;
}

insert image description here
2. Set the background image

body{
    
    
            background-image: url(../image/src=htt.jfif);
        }

insert image description here
3. Put the position of the link in the middle

.nav{
    
    
            width: 960px;
            height: 40px;
            margin: 100px auto;<!--居中-->
        }

insert image description here
4. Remove the hyperlink dots

ul{
    
    
            list-style: none;
        }

insert image description here
5. Style the hyperlink by floating 10 pixels to the right

height: 40px;
line-height: 40px;

Set the height to be the same size as the line height to center the text horizontally

.nav ul li{
    
    
            float: right;
            margin-right: 10px;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-image: url(../image/src=htt.jfif);
            background-repeat: repeat-x;

        }

insert image description here
6. Set the hyperlink style through the pseudo-class selector and change the font, size and background color with dynamic effects

.nav ul li a:link, ul li a:visited {
    
    
            text-decoration: none;
            color: white;
        } 
.nav ul li a:hover{
    
    
            background-color:rgb(248, 145, 10);
            font-family: "楷体";
            font-size: 24px;
            color:black;
        }

insert image description here
Here you can see that the displayed range is the range of text, this is only required to set the width and height of the a tag

6. Finally
, we know that the a tag is an inline element, and the width and height cannot be set for it. At this time, display: block;it means to convert the inline element to a block-level element.

.nav ul li a{
    
    
            width: 120px;
            height: 40px;
            display: block;
        }

insert image description here

3. Complete 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>display案例</title>
    <style>
        *{
     
     
            margin: 0;
            padding: 0;
        }
        body{
     
     
            background-image: url(../image/src=htt.jfif);
        }
       

        ul{
     
     
            list-style: none;
        } 
         .nav{
     
     
            width: 960px;
            height: 40px;
            margin: 100px auto;
        } 
        .nav ul li{
     
     
            float: right;
            margin-right: 10px;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-image: url(../image/src=htt.jfif);
            background-repeat: repeat-x;

        } 
         .nav ul li a:link, ul li a:visited {
     
     
            text-decoration: none;
            color: white;
        } 
        .nav ul li a{
     
     
            width: 120px;
            height: 40px;
            display: block;
        } 
         .nav ul li a:hover{
     
     
            background-color:rgb(248, 145, 10);
            font-family: "楷体";
            font-size: 24px;
            color:black;
        }  
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">发现</a></li>
            <li><a href="#">我的</a></li>
            <li><a href="#">动态</a></li>
            <li><a href="#">留言</a></li>
            <li><a href="#">友链</a></li>
            <li><a href="#">反馈</a></li>
            
        </ul>
    </div>
    
</body>
</html>

OK, it's all in vain
, and the trivialities are also a story