导航栏鼠标移入变色

最新推荐文章于 2022-10-10 17:38:34 发布

东北玛丽的小笔记

最新推荐文章于 2022-10-10 17:38:34 发布

阅读量3.2k

点赞数 2

分类专栏：案例

本文链接：https://blog.csdn.net/weixin_44614856/article/details/87779278

版权

案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
body,ul{
    padding: 0;
    margin: 0;
}
li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
.nav{
    height: 40px;
    background-color: black;
    margin-top: 50px;
}
        .wrapper{
            /*height: 40px;*/
            width: 800px;
            /*background-color: pink;*/
            margin: 0 auto;
        }
        ul li{
            float: left;
        }
        .nav a{
            display: block;
            /*background-color: cornflowerblue;*/
            height: 40px;
            line-height: 40px;
            color: #ffffff;
            padding: 0 15px;
        }
li{
    padding: 0 10px;
}
.first, a:hover{
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
<div class="nav">
    <div class="wrapper">
        <ul>
            <li class="first"><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>
            <li><a href="#">就能看</a></li>
            <li><a href="#">从电脑卡</a></li>
        </ul>
    </div>
</div>
</body>
</html>

东北玛丽的小笔记

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
导航栏鼠标移入变色

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt;body,ul{ padding: 0; margin: 0
复制链接

扫一扫