html加css实现简易导航栏

最新推荐文章于 2023-08-02 12:57:56 发布

benxiaohai888

最新推荐文章于 2023-08-02 12:57:56 发布

阅读量984

点赞数

分类专栏： web前端文章标签：导航 css html

本文链接：https://blog.csdn.net/benxiaohai888/article/details/77915972

版权

web前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易导航栏</title>
    <style type="text/css">

        #nav {
            width: 730px;
            height: 50px;
            background-color: #DFD4B5;
            margin: auto;
        }

        /*子类选择器 > */
        #nav > ul {
            font-weight: bold;
            font-size: small;
            line-height: 50px;
            margin: auto;
        }

        #nav > ul > li {
            list-style-type: none;
            float: left;
        }

        #nav span {
            padding-left: 10px;
            padding-right: 10px;
        }

        li:hover {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }

        li:active {
            color: red;
        }
    </style>
</head>
<body>
<div id="nav">
    <ul>
        <li>首页<span>|</span></li>
        <li>团队简介<span>|</span></li>
        <li>收费标准<span>|</span></li>
        <li>招聘信息<span>|</span></li>
        <li>站点地图<span>|</span></li>
        <li>会员注册<span>|</span></li>
        <li>友情链接<span>|</span></li>
        <li>建议留言<span>|</span></li>
        <li>使用说明</li>
    </ul>
</div>
</body>
</html>

截图：