常用导航栏代码

最新推荐文章于 2024-08-08 19:43:53 发布

CHH5431

最新推荐文章于 2024-08-08 19:43:53 发布

阅读量1.8w

点赞数 7

文章标签：导航栏官网

本文链接：https://blog.csdn.net/qq_41115965/article/details/80079741

版权

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

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

效果图如下：