常用导航栏代码

不念不忘少年蓝@ 2021-09-15 07:46 438阅读 0赞

很多公司的官网，都是有一个始终在窗口最上端的导航栏，本人小白也是多次遇见这个问题，现在模仿了一个导航栏，希望可以帮助大家学习简单的导航栏。。。。。。

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

效果图如下：

![20180425214121414][]

备注：思路来源于[http://www.dowebok.com/demo/2014/77/index14.html][http_www.dowebok.com_demo_2014_77_index14.html]

[20180425214121414]: /images/20210802/8e3e60d839074a5ab646df827ec3546a.png
[http_www.dowebok.com_demo_2014_77_index14.html]: http://www.dowebok.com/demo/2014/77/index14.html