布局，导航菜单

最新推荐文章于 2022-12-09 23:01:20 发布

绿蚁新醅酒红泥小火炉

最新推荐文章于 2022-12-09 23:01:20 发布

阅读量372

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/u013006851/article/details/90107905

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0"> 
	<link rel="stylesheet" type="text/css" href="nav.css">
	<title>IMOOC</title>
</head>
<body>
	<!--  在此完成网页的HTML代码-->
	<header>
		<div>
		    <img src="logo.png"/>
		    <span>MYMOOC</span>
		    <nav>
		       <a>Home</a><a>Course</a><a>Actual</a><a>Plan</a><a>FAQ</a><a>Notes</a>
		    </nav>
		</div>
	</header>
</body>
</html>

/*在此完成CSS样式设置*/
*{
    margin:0;
    padding:0;
}
header{
    height:80px;
    width:1920px;
    overflow:hidden;
    font-family:"SimHei";
	background-color:#000000;
    padding:0;
    text-align: center;
}
header > div{
    width:1200px;
}
header > div > *{
    line-height: 80px;
    margin:0;
    text-align: left;
}
header > div  > img{
    width:40px;
    height:40px;
    vertical-align:middle;
    float:left;
    display: block;
}
header > div  > span{
    font-size:22px;
	/*line-height:40px;*/
    height: :40px;
    display: block;
	/*vertical-align:middle;*/
    color: white;
    float:left;
}
header > div  > nav{
    display:block;
    vertical-align: top;
    line-height: 73px;
    float:right;
}
header > div  > nav > a{
    display:inline-block;
	font-size:16px;
    color:white;
    height:73px;
    line-height: 73px;
    width:110px;
    text-align:center;
}
header > div  > nav > a:first-of-type{
    background-color: #d40112;
}
header > div  > nav > a:nth-child(2){
    background-color: #feb800;
}
header > div  > nav > a:nth-child(3){
    background-color: #78b917;
}
header > div  > nav > a:nth-child(4){
    background-color: #433b90;
}
header > div  > nav > a:nth-child(5){
    background-color: #f27c01;
}
header > div  > nav > a:nth-child(6){
    background-color: #017fcb;
}
header > div > nav > a:hover{
    height: 80px;
}