<!-- prj_8_2.html -->
<!DOCTYPE html>
<html lang ="EN">
<head>
<meta charset="utf-8" />
<title>页面布局设计</title>
<style type ="text/css">
*{
padding: 0px;
margin:0px;
}
#header{
background: url('prj_8_2_logo.png') #4B5B6B no-repeat top left;
width:100%;
height:60px;
}
#nav{
width:100%;
height:80px;
}
ul{
list-style-type: none;
width:100%;
height:80px;
background:#D0C0B0;
text-align:center;
}
li{
font-size:20px;
padding:20px 10px;
display: inline-block;
width: 160px;
height: 40px;
}
a:active,
a:link,
a:visited{
text-decoration: none;
}
a:hover{
background: #CCFF99;
height: 80px;
width:160px;
padding:20px 10px;
}
#main{
width:100%;
height:500px;
background: #FEFEFE
}
#article{
width:75%;
height: 500px;
background: #DBDACA;
float: left;
}
.section{
width: 320px;
height:440px;
float:left;
border:1px dashed #006600;
text-align: middle;
margin: 20px;
}
img{
width: 300px;
height: 400px;
margin: 10px;
}
#aside{
width:20%;
height: 500px;
background: #9F9F9A;
float: right;
text-align: center;
vertical-align: middle;
}
#footer{
clear: both;
width:100%;
height:80px;
background: #EAEADA;
padding:20px auto;
text-align: center;
}
#footer p{
font-size: 20px;
padding-top: 25px;
height:25px;
}
</style>
</head>
<body>
<header id="header"></header>
<nav id="nav">
<ul>
<li>
<a herf="#">首页</a>
</li>
<li>
<a herf="#">HTML5 </a>
</li>
<li>
<a herf="#">CSS3</a>
</li>
<li>
<a herf="#">JavaScript</a>
</li>
<li>
<a herf="#">DOM</a>
</li>
<li>
<a herf="#">BOM</a>
</li>
</ul>
</nav>
<div id="main">
<article id="article">
<section calss="section">
<img src="img/prj_8_2_html5_logo.png">
</section>
<section class="section">
<img src="img/prj_8_2_css3_logo.png">
</section>
<section class="section">
<img src="img/prj_8_2_javascript_logo.png"/>
</section>
</article>
<aside id="aside">
<figure>
<img src="img/prj_8_2_html5.png">
<figcaption>HTML5结构元素侧边aside</figcaption>
</figure>
</aside>
</div>
<footer id="footer">
<p>
Copyright ©2017-2020 Web 前端开发工作室- 业务开发-网站建设
</p>
</footer>
</body>
</html>
