html 顶部导航栏top-bar实现 css+html

网站往往需要顶部导航栏，先看效果图

接下来是代码实现：

首先是css代码：

1.  
   .top-bar {
2.  
   width: 100%;
3.  
   height: 50px;
4.  
   margin: 0;
5.  
   display: flex;
6.  
   }
7.  
   .box-top {
8.  
   width: 100%;
9.  
   min-width: 1350px;
10.  
    background-color: rgba(255,255,255,0.5);
11.  
    padding: 20px;
12.  
    /*border-bottom-left-radius: 8px;*/
13.  
    /*border-bottom-right-radius: 8px;*/
14.  
    }
15.  
    .box-top-right{
16.  
    }
17.  
    .top-ui {
18.  
    width: 100%;
19.  
    min-width: 800px;
20.  
    height: 50px;
21.  
    list-style: none;
22.  
    margin: 0;
23.  
    padding: 0;
24.  
    }
25.  
    .top-ui li{
26.  
    width:10%;
27.  
    min-width: 50px;
28.  
    margin:-5px 50px 0 70px;
29.  
    float: left;
30.  
    text-align: center;
31.  
    display: block;
32.  
    }
33.  
    .top-ui a{
34.  
    color: black;
35.  
    text-decoration: none;//下划线;
36.  
    }
37.  
    .top-ui a:hover{
38.  
    color: white;
39.  
    }
40.  
    .top-ui img{
41.  
    height: 40px;
42.  
    margin: 0;
43.  
    padding: 0;
44.  
    display: inline;
45.  
    position: relative;
46.  
    top: -10px;
47.  
    }

接下来是html的实现：

1.  
   <div class="top-bar">
2.  
   <div class="box-top">
3.  
   <ul class="top-ui">
4.  
   <li>
5.  
   <a href="/"><img src="img/logo_min.png"></a>
6.  
   </li>
7.  
   <li>
8.  
   <a href="#">推荐</a>
9.  
   </li>
10.  
    <li>
11.  
    <a href="#">找房</a>
12.  
    </li>
13.  
    <li>
14.  
    <a href="#">帮助</a>
15.  
    </li>
16.  
    <li>
17.  
    <a href=“#" target="_blank">登录/注册</a>
18.  
    </li>
19.  
    </ul>
20.  
    </div>
21.  
    </div>

这篇好文章是转载于：学新通技术网