<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
*{ padding:0;
margin:0;
/* 无内外间距 */}
body{width:1540px;
height:1000px;
/* 可以向下拉页面 */
overflow-x:hidden;}
li{list-style:none;
float:left;
}
/* 去掉点，向右浮动 */
div{width:1540px;
height:55px;
position:fixed;
left:0;
top:0;
border-bottom:1px solid black;}
/* 定义div大小 固定定位 下边框黑色 */
.d{margin-left:6px;
margin-top:3px;}
.d1{width:550px;
height:35px;
border:0.3px solid gray;
margin-top:10px; }
.d2{width:100px;
height:35px;
border:0.3px solid blue;
background:blue;
margin-top:10px;
}
.d1 img{margin-left:510px;
margin-top:3px;
}
.d2 a{ display:block;
width:80px;
height:10px;
color:white;
text-decoration:none;
padding-top:6px;
margin-left:18px;}
.d3 a{display:block;
font-size:75%;
width:50px;
height:10px;
margin-left:620px;
margin-top:18px;
color:black;}
.d4 a{display:block;
font-size:70%;
width:25px;
height:10px;
margin-left:7px;
color:black;
margin-top:18px;}
/* 调整各个li之间的位置 */
</style>
<body>
<div>
<ul>
<li class="d"><img src="images/QQ截图20181117184056.png" height="45" width="120" alt=""></li>
<li class="d1"><a href="#"><img src="images/QQ截图20181117184037.png" height="30" width="37" alt=""></a>
</li>
<li class="d2"><a href="#">百度一下</a></li>
<li class="d3"><a href="#">百度首页</a></li>
<li class="d4"><a href="#">设置</a></li>
<li class="d4"><a href="#">登录</a></li>
</ul>
</div>
</body>
</html>
效果图