QQ会员页面导航

效果：

代码：
导航栏.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ会员</title>
    <link rel="stylesheet" href="css/style2.css">
</head>
<body>
    <div class="wrap">
<!-- 头部-->
        <header class="nav-header">
            <div class="nav-contain">
                <a href="" class="top-logo">
                    <img src="images/title.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>

style.css

*{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
}
.nav-header{
    height: 90px;
    width: 100%;
    background: rgba(0,0,0,.6);
}
.nav-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: #986b0b;
    background: #fad65c;
}
.top-right a:last-of-type{
    width: 140px;
    height: 40px;
    font-weight: 700;
    line-height: 40px;
    background: #fad65c;
    color: #986b0b;
}
.top-right a:last-of-type:hover{
    background: #fddc6c;
}
posted @ 2021-07-30 14:58  博客zhu虎康  阅读(283)  评论(0)  编辑  收藏  举报