html简单顶部导航栏top-bar实现css+html ⽹站往往需要顶部导航栏，先看效果图
接下来是代码实现：
⾸先是css代码：
.top-bar {
width: 100%;
height: 50px;
margin: 0;
display: flex;
}
.box-top {
width: 100%;
min-width: 1350px;
background-color: rgba(255,255,255,0.5);    padding: 20px;
/*border-bottom-left-radius: 8px;*/
/*border-bottom-right-radius: 8px;*/
}
.box-top-right{
}
.
top-ui {
width: 100%;
min-width: 800px;
height: 50px;
list-style: none;
margin: 0;
padding: 0;
}
.top-ui li{
width:10%;
min-width: 50px;
margin:-5px 50px 0 70px;
float: left;
html代码转链接text-align: center;
display: block;
}
.top-ui a{
color: black;
text-decoration: none;//下划线;
}
.top-ui a:hover{
color: white;
}
.top-ui img{
height: 40px;
margin: 0;
padding: 0;
display: inline;
position: relative;
top: -10px;
}
接下来是html的实现：
<div class="top-bar">
<div class="box-top">
<ul class="top-ui">
<li>
<a href="/"><img src="img/logo_min.png"></a>            </li>
<li>
<a href="#">推荐</a>
</li>
<li>
<a href="#">房</a>
</li>
<li>
<a href="#">帮助</a>
</li>
<li>
<a href=“#" target="_blank">登录/注册</a>
</li>
</ul>
</div>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。