CSS样式实例---导航条

导航条一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航条</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				}
			.nav{
				list-style: none;
				background-color: #64951D;
				width: 1000px;
				margin: 50px auto;
				/*解决高度塌陷*/
				overflow: hidden;
				}
				.nav li{
					width: 25%;
					float:left;
				}
				.nav a{
					/*将a转化成块元素，否则不能设置宽度*/
					display: block;
					/*模块内都能触发链接*/
					width: 100%;
					text-align: center;
					/*设置上下外边距*/
					padding: 5px 0;
					text-decoration: none;
					/*设置字颜色和粗体*/
					color: white;
					font-weight: bold;
				}
				.nav a:hover{
					background-color: #C00;
				}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li><a href="#">首页</a></li>
			<li><a href="#">新闻</a></li>
			<li><a href="#">联系</a></li>
			<li><a href="#">关于</a></li>
		</ul>
	</body>
</html>

效果图：
在这里插入图片描述

导航条二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		body{height: 1200px;}
		ul{list-style: none;}
		a{color: #51504f;text-decoration: none;}
		.header h1 a{color: white;line-height: 80px;}
		header{width:100%;height:80px;background: rgba(0,0,0,0.8);position: fixed;z-index: 888;top: 0;}
		.header{width: 1200px;height: 80px;line-height: 80px;margin: 0 auto;}
		.header h1{float: left;  /* background: url(img/logo.png) no-repeat 0 20px; */}
		.nav{float: right;}
		.nav li{float:left;height: 80px;line-height: 80px;}
		.nav li a{color:#fff;font-size: 14px;float: left;height: 80px;padding: 0 20px;}
		.nav li a:hover{color:#fff;background-color: #444;} 
	</style>
	<body>
		<header>
		<div class="header">
			<h1><a href="#"title="网站建设">LOGO<!-- <img src="img/123.png" > --></a></h1>
			<ul class="nav">
				<li><a href="#">首页</a></li>
				<li><a href="#">网站建设</a></li>
				<li><a href="#">系统开发</a></li>
				<li><a href="#">实例解析</a></li>
				<li><a href="#">文章欣赏</a></li>
				<li><a href="#">关于我们</a></li>
				<li><a href="#">联系我们</a></li>
				<li><a href="#">来源速递</a></li>
			</ul>
		</div>
		</header>
	</body>
</html>

效果图：
在这里插入图片描述

来源：CSDN

作者：Danny_￥%#*

链接：https://blog.csdn.net/qq_43024228/article/details/103939708

标签

导航条