QQ会员导航条

最新推荐文章于 2024-07-27 10:28:35 发布

q1575290554

最新推荐文章于 2024-07-27 10:28:35 发布

阅读量486

点赞数

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

本文链接：https://blog.youkuaiyun.com/Q1575290554/article/details/125477126

版权

前端专栏收录该内容

28 篇文章

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>QQ会员</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        .nav-header{
            height: 90px;
            width: 100%;
            background: rgba(0,0,0,.6);
        }
        .head-contain{
            width: 1180px;
            height: 90px;
            margin: 0 auto;
            text-align: center;
        }
        .top-logo,.top-nav,.top-nav li,.top-right{
            height: 90px;
            display: inline-block;
            vertical-align: top;
        }
        .top-nav{
            margin: 0 48px;
        }
        .top-nav li{
            line-height: 90px;
            width: 90px;
        }
        .top-nav li a{
            display: block;
            text-align: center;
            font-size: 16px;
            color: #fff;
        }
        .top-nav li a:hover{
            color: blue;
        }

        .top-right a{
            display: inline-block;
            font-size: 16px;
            text-align: center;
            margin-top: 25px;
            border-radius: 35px;
        }
        .top-right a:first-of-type{
            width: 93px;
            height: 38px;
            line-height: 38px;
            color: #fad65c;
            border: 1px #fad65c solid;
        }
        .top-right a:first-of-type:hover{
            color: #986b0d;
            background: #fad65c;
        }
        .top-right a:last-of-type{
            width: 140px;
            height: 40px;
            font-weight: 700;
            line-height: 40px;
            background: #fad65c;
            color: #986b0d;
        }
        .top-right a:last-of-type:hover{
            background: #fddc6c;
        }
    </style>
</head>
<body>
<div class=""wrap"">
    <!--头部-->
    <header class=""nav-header"">
        <div class=""head-contain"">
            <a href="""" class=""top-logo""><img src=""image/1.png"" width=""145"" height=""90"" /></a>
            <nav class=""top-nav"">
                <ul>
                    <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>
            </nav>
            <div class=""top-right"">
                <a href="""">登录</a>
                <a href="""">开通超级会员</a>
            </div>
        </div>
    </header>
</div>
</body>
</html>

在这里插入图片描述