2-2 編程練習

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>2-2 編程練習</title>
<link rel="stylesheet" type="text/css" href="css/2-2編程練習.css">
</head>
<body>
		<header>
			<div class="container">
				<a href="#"><img src="http://img1.sycdn.imooc.com/climg//582e5f160001b17100400040.png"><p>MYMOOC</p></a>
				<nav>
					<a class="Home avtive" href="#">Home</a>
					<a class="Course " href="#">Course</a>
					<a class="Actual" href="#">Actual</a>
					<a class="Plan" href="#">Plan</a>
					<a class="FAQ" href="#">FAQ</a>
					<a class="Notes" href="#">Notes</a>
				</nav>
			</div>
			
		</header>


</body>
</html>

*{
	padding:0;
	margin:0;
	border: none;
	font-size:14px;
	font-family:Arial;

}
a {
	text-decoration: none;
	color:#fff;
}
header{
	height:80px;
	background:#000;
}

header > .container{
	width: 1200px;
	margin: 0 auto;
}

header > .container >a {
	display: block;
	float:left;
	margin:15px 25px;
}
header > .container >a >p{
	float: right;
	margin:20px 0px;
	font-size: 20px;
}

header > .container > nav{
	float: right;
}

header > .container > nav > a{
 		font-size: 24px;
 		display: block;
 		float: left;
 		width: 110px;
 		height:73px;
 		line-height: 73px;
 		text-align: center;

}

header > .container > nav > a.Home{background:  #d40112;}   
header > .container > nav > a.Course{background:#feb800;}   
header > .container > nav > a.Actual{background: #78b917;}
header > .container > nav > a.Plan{background: #6600CC;}
header > .container > nav > a.FAQ{background: #f27c01 ;}
header > .container > nav > a.Notes{background:#0099FF;}
header > .container > nav > a:hover,
header > .container > nav > a.avtive{
	padding-bottom: 7px;
}

慕数据3203843 2019-10-02

源自：项目：H5布局 2-2 编程练习