HTML5第一次作业--网页架构搭建

叁歲伎倆 2023-07-11 11:16 1阅读 0赞

HTML5第一次作业--网页架构搭建  
作业任务：结合课堂讲授的知识，利用HTML5新增的结构化语义标签搭建一个包含页眉、页脚和主题内容部分的网页架构，要求主体内容部分为四行三列。同时在距离页眉底部5px出添加一个包含5个以上导航条的导航栏，同时要求点击导航条会有跳转（可以使空跳转）【导航栏内容不限】

最终效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmdzaHVkaWFu_size_16_color_FFFFFF_t_70][]

代码如下：

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmdzaHVkaWFu_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200305113313646.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmdzaHVkaWFu,size_16,color_FFFFFF,t_70