关于导航栏部分的作业

来源：4-4 自由编程

qq_慕莱坞4316410

2021-05-10 16:54:13

css样式部分的代码

*{
	margin:0;
	padding:0;
}
ul{
	list-style: none;
}
a{
	text-decoration:none;
}

header{
	height:80px;
	background-color:#02cbc9;
}
header .nav_box{
	width:1200px;
	height:80px;
	margin:0 auto;
}
header .nav_box .logo{
	width:300px;
	height:80px;
	float: left;
}
header .nav_box .logo h1{
	color: aliceblue;
	font-size: 30px;
	font-style: italic;
	line-height:80px;
	text-align: center;
}
header .nav_box nav{
	width:700px;
	height:80px;
	float:right;
}
header .nav_box nav ul li{
	height:80px;
	float:left;
	line-height:80px;
	text-align:center;
}
header .nav_box nav ul li a{
	width:120;
	height:80px;
	display: block;
	color:moccasin;
	padding:0 15px;
}
header .nav_box nav ul li a:hover{
	background-color: aquamarine;
}

html标签部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏部分</title>
		<link rel="stylesheet" href="../css/nav.css"/>
	</head>
	<body>
		<header>
			<div class="nav_box">
				<div class="logo">
					<h1>Career Builder</h1>
				</div>
				<nav>
					<ul>
						<li><a href="#">HOME</a></li>
						<li><a href="#">ABOUT</a></li>
						<li><a href="#">GALLERY</a></li>
						<li><a href="#">FACULTY</a></li>
						<li><a href="#">EVENTS</a></li>
						<li><a href="#">CONTACT</a></li>
					</ul>
				</nav>
			</div>
		</header>
	</body>
</html>