<!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 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>
大致效果如下: