导航条（参照冒险岛官网）12.12

最新推荐文章于 2024-09-13 23:32:49 发布

GRP_dream

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量276

点赞数

分类专栏：萌新的前端进击之路文章标签：前端

本文链接：https://blog.csdn.net/GRP_dream/article/details/78787424

版权

萌新的前端进击之路专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>nav</title>
<style>
    *{
   margin:0;
   padding:0;
   }
   .wrap{
   width:1920px;
   height:938px;
   background-color:#FFFF66;
   }
   .nav{
   width:1920px;
   height:50px;
   background-color:#FFF;
   }
   .nav1{
   position:absolute;
   left:18.75%;
   right:18.75%;
   width:62.5%;
   height:50px;
   }
   .logo{
   position:inherit;
   left:0;
   width:270px;
   height:50px;
   }
   .logo a{
   display:block;
   margin-top:7px;
   width:100%;
   height:35px;
   background:url(img/logo_slogan_white_v2_small.png) no-repeat;
   }
   .tbe{
   position:inherit;
   right:0;
   width:188px;
   height:50px;
   }
   .tbe ul{
   display:flex;
   justify-content:space-between;
   align-items:center;
   width:100%;
   height:100%;
   }
   .tbe ul li{
   list-style:none;
   text-align:center;
   line-height:40px;
   font-size:13px;
   font-weight:600;
   }
   .tbe ul li a{
   color:#000000;
   text-decoration:none;
   }
   .tbe ul li a:hover{
   color:#FF0000;
   }
   .tbe ul li:nth-of-type(2),.tbe ul li:nth-of-type(4){
   opacity:0.1;
   }
</style>
</head>

<body>
    <div class="nav">
        <div class="nav1">
            <div class="logo"><a href="../loading/loading.html"></a></div>
            <div class="tbe">
                <ul>
                    <li><a href="../bubble/bubble.html">注册</a></li>
                   <li>|</li>
                   <li><a href="../bubble/bubble.html">充值</a></li>
                   <li>|</li>
                   <li><a href="../bubble/bubble.html">彩虹客服</a></li>
               </ul>
            </div>
       </div>
   </div>
   <div class="wrap"></div>
</body>

</html>

大致效果如下：