Demo

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* a链接没有被访问过的状态 */
            a:link{
                color: orange;
            }
            /* a链接被访问过的状态 */
            a:visited{
                color: green;
            }
            /* 鼠标移动至a链接时的状态 */
            a:hover{
                color: red;
            }
            /* 鼠标按下 没有抬起时的状态 */
            a:active{
                color: yellow;
            }
            
            ul{
                margin: 0;
                padding: 0;
            }
            
            li{
                list-style: none;
                float: left;
                width: 160px;
                height: 60px;
                text-align: center;
                line-height: 60px;
                background-color: black;
                color: white;
            }
            .li1:hover{
                background-color: red;
            }
            
            .li2:hover{
                background-color: cadetblue;
            }
            
            .li3:hover{
                background-color: sandybrown;
            }
            
        </style>
        
        
    </head>
    <body>
        <!-- a标签的集中状态 -->
        <a href="https://baidu.com">百度</a>
        <ul>
            <li class="li1">实战</li>
            <li class="li2">课程</li>
            <li class="li3">社区</li>
        </ul>
    </body>
</html>
最后修改：2020 年 04 月 06 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏