导航栏制作

星星小团

于 2023-12-02 15:34:56 发布

阅读量55

点赞数

文章标签：前端 html css

本文链接：https://blog.youkuaiyun.com/2301_79726309/article/details/134753102

版权

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;padding:0
        }
        ul,ol,li{
            list-style: none;
        }
        .nav{
            height:50px;
            background-color: #00659c;
        }
        ul{
            /* 版心 */
            width: 962px;
            height:50px;
            /* background-color: red; */
            margin: 0 auto;
        }
        .nav li{
            float: left;
            line-height: 50px;
            color: white;
            font-size: 14px;
            padding:0px 30px;
            background: url(../img/shu.png) no-repeat right center;
        }
        .last{
            background-image: none !important;
        }
        #on{
            background-color: #004b8b;
        }
        .nav li:hover{
            background-color: #004b8b;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>    
            <li>首页</li>
            <li>产品服务</li>
            <li id="on">成功案例</li>
            <li>媒体报道</li>
            <li>观点</li>
            <li>关于我们</li>
            <li>合作伙伴</li>
            <li class="last">联系我们</li>
        </ul>
    </div>
</body>
</html>