很多公司的官网，都是有一个始终在窗口最上端的导航栏，本人小白也是多次遇见这个问题，现在模仿了一个导航栏，希望可以帮助大家学习简单的导航栏。。。。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简单导航栏学习</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.top {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 999;
height: 50px;
background-color: rgba(0, 0, 0, 0.6);
}
.menu {
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.logo {
float: left;
margin-top: 9px;
}
.logo a {
display: inline-block;
width: 32px;
height: 32px;
background-image: url("http://temp.im/32x32/4CD964/fff");
background-size: 32px 32px;
}
.nav {
float: right;
margin-top: 10px;
font-size: 0;
}
.nav li {
display: inline-block;
margin-left: 40px;
}
.nav a {
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #fff;
text-decoration: none;
}
.nav a:hover {
color: #83c3f3;
}
</style>
</head>
<body>
<div class="top">
<div class="menu">
<h1 class="logo"><a href="http://www.dowebok.com/"></a></h1>
<ul class="nav">
<li>
<a href="javascript:">首页</a>
</li>
<li>
<a href="javascript:">产品</a>
</li>
<li>
<a href="javascript:">技术</a>
</li>
<li>
<a href="javascript:">渠道</a>
</li>
<li>
<a href="javascript:">论坛</a>
</li>
<li>
<a href="javascript:">关于我们</a>
</li>
</ul>
</div>
</div>
</body>
</html>
效果图如下：
