HTML5第一次作业--网页架构搭建_html5架构搭建-CSDN博客

本文链接：https://blog.csdn.net/liuyingshudian/article/details/104671182

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>