HTML5: Khung giao diện web
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
article, aside, footer, header, section{
display:block;
text-align:center;
}
#total{
width:900px;
margin:0px auto;
position:relative;
}
#logo, #banner, aside, article, footer, article header{
border:green thin solid;
box-sizing:border-box;
float:left;
}
#logo,#banner,#total > footer{
height:100px;
padding-top:35px;
}
#logo{
width:25%;
}
#banner{
width:75%;
}
aside,article{
height:200px;
}
aside{
width:20%;
padding-top:90px;
}
article{
width:60%;
}
footer{
width:100%;
}
article header,article footer{
width:100%;
height:50px;
padding-top:15px;
}
article article{
width:100%;
height:100px;
padding-top:40px;
}
</style>
</head>
<body>
<section id="total">
<header><section id="logo">Header>>Section-Logo</section><section id="banner">Header>>Section-Banner</section></header>
<nav></nav>
<section>
<aside>Aside</aside><article><header>Article>>Header</header><article>Article-Article</article><footer>Article>>Footer</footer></article><aside>Aside</aside>
</section>
<footer>Footer</footer>
</section>
</body>
</html>