hover事件的导航

带反选效果的导航栏

最新推荐文章于 2022-05-27 15:33:23 发布

weixin_30410999

最新推荐文章于 2022-05-27 15:33:23 发布

阅读量91

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yzhweb/p/7361323.html

一个普通的导航，带反选效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="blog%20css.css" type="text/css"/>
    <title>hover事件的导航</title>
</head>
<body>
        <div id="nav">
            <ul>
                <li><a href="#">首 页</a></li>
                <li><a href="#">新随笔</a></li>
                <li><a href="#">留 言</a></li>
            </ul>
        </div>
</body>
</html>

body{
    margin:0;
    padding:0:
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
#nav{
    margin:0 auto;
}

li{
    display: block;
    float:left;
    height:30px;
}
a{
    display: inline-block;
    width: 100px;
    text-align: center;
    height:30px;
    line-height: 30px;
    color:#fff;
    background-color: aqua;
}
a:hover{
    color:aqua;
    background-color: #fff;
}