html+css 导航条变色

最新推荐文章于 2024-05-19 09:58:49 发布

老张谋

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量1.1w

点赞数 16

分类专栏：前端技术文章标签： HTML CSS web 导航条变色

本文链接：https://blog.csdn.net/wgf5845201314/article/details/88044968

版权

前端技术专栏收录该内容

111 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>162-a标签伪类选择器练习</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        ul{
            width: 960px;
            height: 40px;
            /*background-color: green;*/
            margin: 100px auto;
            
        }
        ul li{
            list-style: none;
            width: 120px;
            height: 40px;
            float: left;
            /*background-color: purple;*/
            text-align: center;
            line-height: 40px;
        }
        /*设置a标签的宽高和li标签的宽高一样，使得li标签征个区域一触摸就变成小手*/
        
        /*1.在企业开发中编写a标签的伪类选择一般写在a标签选择器的后面；
        2. 在企业开发中和a标签盒子相关的属性都写在标签选择器中（显示模式、宽度、高度、margin、padding)
        3. 在企业开发中和a标签的文字背景相关属性一般写在伪类选择器中；
        */
        ul li a{
            width: 120px;
            height: 40px;
            display: inline-block;
        }
        /*默认状态*/
        ul li a:link{
            background-color: pink;
            color:white;
            text-decoration: none;
        }
        /*悬停状态*/
        ul li a:hover{
            color: red;
            background-color: #ccc;
        }
        ul li a:active{
            color: yellow;

        }
    </style>
</head>
<body>
<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>
    <li><a href="#">我是导航</a></li>
</ul>
</body>
</html>

默认状态：

悬停状态：

长按状态：

老张谋

关注

16
点赞
踩
80

收藏

觉得还不错? 一键收藏
1
评论
html+css 导航条变色

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;162-a标签伪类选择器练习&lt;/title&gt; &lt;style&gt; *{ ma
复制链接

扫一扫