即使 html 元素是文档的根元素，它也不包含 doctype 元素。doctype 元素必须位于 html 元素之前。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>使用新型盒布局设计网页</title>
<style type="text/css">
body, html {
margin:0;
padding:0;
width:100%;
height:100%;
font-family:Arial, Helvetica, sans-serif;
}
h3 {
padding:15px;
color:#FFFFFF;
margin:0px;
}
a {
color:#fff;
}
body {
display:-webkit-box;
display:-moz-box;
display:box;
-webkit-box-pack:center;
-moz-box-pack:center;
box-pack:center;
}
#area {
height:100%;
max-width:950px;
min-width:600px;
display:-webkit-box;
display:-moz-box;
display:box;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
box-orient:vertical;
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
}
#area header {
background-color:#ff6600;
text-align:center;
line-height:35px;
color:#FFFFFF;
font-size:24px;
font-weight:bold;
}
#area #header {
padding:15px;
}
#area #container {
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
display:-webkit-box;
display:-moz-box;
display:box;
}
#area footer {
background-color:#f47D31;
text-align:center;
line-height:20px;
color:#FFFFFF;
}
#area #footer {
padding:10px;
}
#area #container nav {
width:170px;
background-color:#999;
}
#area #container article {
padding:10px;
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
display:-webkit-box;
display:-moz-box;
display:box;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
box-orient:vertical;
}
#area #container aside {
width:170px;
background-color:#999;
}
#area #container nav a:link, #area #container nav a:visited {
display:block;
border-bottom:3px solid #fff;
padding:10px;
text-decoration:none;
font-weight:bold;
margin:5px;
}
#area #container nav a:hover {
color:#FFFFFF;
background-color:#f47D31;
}
#area #container article p {
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
}
#area #container aside p {
padding:15px;
font-weight:bold;
font-style:italic;
color:#FFF;
}
</style>
</head>
<body>
<div id="area">
<header id="header">页头：使用新型盒布局设计网页 </header>
<div id="container">
<nav>
<h3>导航栏</h3>
<a href="#">盒布局</a> <a href="#">布局方向</a> <a href="#">布局顺序</a> </nav>
<article>
<header>标题：开启盒布局 </header>
<p>内容：盒布局是CSS3发展的新型布局方式，它比传统的浮动布局方式更加完善、更加灵活，而使用方法却极为简单。
开启盒布局后，文档就会按照盒布局默认的方式，来布局子元素。</p>
<footer> 日期：2011-10 </footer>
</article>
<aside>
<h3>侧边栏</h3>
<p>侧边栏内容</p>
</aside>
</div>
<footer id="footer"> 页脚：2011© </footer>
</div>
</body>
</html>
Processed:
0.020, SQL:
10
