QQ会员导航html&css

最新推荐文章于 2025-03-13 10:38:19 发布

Moerin_

最新推荐文章于 2025-03-13 10:38:19 发布

阅读量1.2k

点赞数 3

文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/Moerin_/article/details/126665904

版权

这是一个网页顶部导航栏的HTML和CSS代码实现，包括背景图片设置、导航菜单布局和登录按钮样式。页面包含功能特权、游戏特权等链接，并提供登录和开通超级会员的功能选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        body{
          background: url(./img/bg.jpg) no-repeat;
          background-size: cover;
        }
        nav{
            width: 100%;
            height: 90px; 
        }
        .box{
            width: 1000px;
            height: 90px;
            margin: 0 auto;
        }
        .logo>img{
            float:left ;
            width: 145px;
            height: 90px;
           
        }
        .list{
            width:600px;
            height: 90px;
            margin: 0 auto;
        }
        .list>li{
            float: left;
            width: 84px;
            height: 90px;
            line-height: 90px;
        }
        .list>li>a{
            color: #fff;
        }
        .login{
            float: right;
            margin: 0 auto;
            margin-top: -65px;
       
        }
        .login>p:first-child>a{
            color:#986b0d;
            float: right;
            width: 80px;
            height: 40px;
            border-radius: 20px;
            border: 1px solid  #fad65c;
            text-align: center;
            line-height: 40px;           
        }
        .login p:last-child>a{
            color: #986b0d;
            font-weight: bold;
            float: right;
            background-color: #fad65c ;
            width: 136px;
            height: 40px;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;  
            margin-right: -230px;
        }
        .list>li>a:hover{
            color:#394490;

        }
        .login>p>a:hover{
            background-color: #fad65c;
        }
 
    </style>
</head>

<body>
    <nav>
        <div class="box">
            <div class="logo">
                <img src="./img/logo.png" alt="">
            </div>
            <ul class="list">
                <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 class="login">
                <p><a href="">登录</a></p>
                <p><a href="">开通超级会员</a></p>
            </div>
        </div>
    </nav>
</body>

</html>