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;
    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>