<!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>
QQ会员导航html&css
最新推荐文章于 2023-12-30 19:58:28 发布