QQ会员页面导航 

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>QQ会员页面导航</title>
  6     <style>
  7         #father{
  8             background: gray;
  9             width:1120px;
 10             height:72px ;
 11         }
 12         #logo{
 13             display: inline-block;
 14             width:112px;
 15             height:72px;
 16             margin-left: 50px;
 17         }
 18         img {
 19             vertical-align: middle;
 20         }
 21         #list{
 22             display: inline-block;
 23             width:660px;
 24         }
 25         nav{
 26             padding-left: 60px;
 27         }
 28         a{
 29             font-size: 14px;
 30             color:white;
 31             text-decoration: none;
 32             margin-right: 25px;
 33         }
 34         a:hover{
 35             color:blue;
 36         }
 37         #login{
 38             display: inline-block;
 39             width:220px ;
 40             margin-left: 23px;
 41         }
 42         .a1{
 43             width:80px;
 44             height:30px;
 45             border:1px #f1ff66 solid;
 46             border-radius: 20px;
 47             background: gray;
 48             display: inline-block;
 49             line-height:30px ;
 50             text-align: center;
 51             padding-top: 2px;
 52             font-size: 14px;
 53             color:#f1ff66;
 54             text-decoration: none;
 55             margin: 0;
 56         }
 57         .a1:hover{
 58             color:orange;
 59         }
 60         .a2{
 61             width:120px;
 62             height:30px;
 63             border:1px #f1ff66 solid;
 64             border-radius: 20px;
 65             background: #f1ff66;
 66             display: inline-block;
 67             line-height:30px ;
 68             text-align: center;
 69             padding-top: 2px;
 70             font-size: 14px;
 71             font-weight: bold;
 72             color: #c6802b;
 73             text-decoration: none;
 74             margin-right: 0;
 75         }
 76         .a2:hover{
 77             color:#A50713;
 78         }
 79     </style>
 80 </head>
 81 <body>
 82 <header>
 83     <div id="father">
 84         <div id="logo"><img src="image/logo.png" width="116px" height="72px"/></div>
 85         <div id="list">
 86             <nav>
 87                 <a href="">功能特权</a>
 88                 <a href="">游戏特权</a>
 89                 <a href="">生活特权</a>
 90                 <a href="">会员活动</a>
 91                 <a href="">成长体系</a>
 92                 <a href="">年费专区</a>
 93                 <a href="">超级会员</a>
 94             </nav>
 95         </div>
 96         <div id="login">
 97             <a class="a1" href="">登录</a>
 98             <a class="a2" href="">开通超级会员</a>
 99         </div>
100     </div>
101 </header>
102 </body>
103 </html>

 

posted @ 2021-01-20 09:14  残冰辉  阅读(556)  评论(0)    收藏  举报