HTML5第一次作业--网页架构搭建
作业任务:结合课堂讲授的知识,利用HTML5新增的结构化语义标签搭建一个包含页眉、页脚和主题内容部分的网页架构,要求主体内容部分为四行三列。同时在距离页眉底部5px出添加一个包含5个以上导航条的导航栏,同时要求点击导航条会有跳转(可以使空跳转)【导航栏内容不限】
最终效果:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0px;margin: 0px;}
header{background:#ee82ee;width:100%;height:100px;margin-bottom: 2px;position: relative;}
/*article{background: #123456;width:32%;height:600px;float:left; }*/
.c01{background:#eee35a;width:37%;height:150px;float:left;margin-right:10px;margin-bottom: 2px;}
.c02{background:#f2e68c;width:37%;height:150px;float:left;margin-bottom: 2px;}
.b01{background:#f08380;width:24%;height:150px; float:right;margin-bottom: 2px;}
.c03{background:#eee35a;width:37%;height:150px;float:left;margin-right:10px;margin-bottom: 2px;}
.c04{background:#f2e68c;width:37%;height:150px;float:left;margin-bottom: 2px;}
.b02{background:#f08380;width:24%;height:150px; float:right;margin-bottom: 2px;}
.c05{background:#eee35a;width:37%;height:150px;float:left;margin-right:10px;margin-bottom: 2px;}
.c06{background:#f2e68c;width:37%;height:150px;float:left;margin-bottom: 2px;}
.b03{background:#f08380;width:24%;height:150px; float:right;margin-bottom: 2px;}
.c07{background:#eee35a;width:37%;height:150px;float:left;margin-right:10px;}
.c08{background:#f2e68c;width:37%;height:150px;float:left;margin-top:2px;}
.b04{background:#f08380;width:24%;height:150px; float:right;margin-bottom: 2px;}
section{height:600px;}
footer{background:#cc9900;width:100%;height:100px;clear:both;margin-top:10px;}
nav{position:absolute;left:250px;bottom:5px;color:blue;font-weight: bold}
ul{list-style: none;}
ul li{float: left;}
ul li a{text-decoration: none;
color:#fff;
background: #00f;
height: 40px;
display: block;
line-height: 40px;
margin-right: 2px;
padding: 0px 10px;
}
ul li a:hover{background: green;}
ul li ul li{float:none;width: 150px;border-top:1px solid white;}
ul li ul{position:absolute;width: 190px;display: none;}
ul li:hover ul{display: block;}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">学校概况</a></li>
<li><a href="#">管理机构</a></li>
<li><a href="#">学院设置</a>
<ul>
<li><a>电器学院</a></li>
<li><a>能源学院</a></li>
<li><a>计算机科学与技术学院</a></li>
<li><a>材料学院</a></li>
<li><a>化工学院</a></li>
</ul>
</li>
<li><a href="#">招生就业</a></li>
<li><a href="#">科学研究</a></li>
</ul>
</nav>
</header>
<section>
<article class=c01></article>
<article class=c02></article>
<aside class=b01></aside>
<article class=c03></article>
<article class=c04></article>
<aside class=b02></aside>
<article class=c05></article>
<article class=c06></article>
<aside class=b03></aside>
<article class=c07></article>
<article class=c08></article>
<aside class=b04></aside>
</section>
<footer></footer>
</body>
</html>