1，下面是一個簡單的上下布局樣例：
2，代碼如下
可以看到頁面裡使用了HTML5的語義元素：< header >、< footer >、< article >
— index.html —
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>上中下結構</title>
<link rel="stylesheet" href="hangge.css">
</head>
<body>
<article>
<header>
<h1>歡迎來到hangge.com</h1>
<p class="Teaser">航歌 - 做最好的開發者知識平台</h2>
<p class="Byline">by hangge.com</p>
</header>
<div class="Content">
<p>前面講了如何讓程式申請背景短時運作。但這個額外延長的時間畢竟有限。</p>
<h2>小标題1</h2>
<p>前面講了如何讓程式申請背景短時運作。但這個額外延長的時間畢竟有限。</p>
<h2>小标題2</h2>
<p>前面講了如何讓程式申請背景短時運作。但這個額外延長的時間畢竟有限。</p>
</div>
</article>
<footer>
<p class="Disclaimer">hangge.com 版權所有,未經允許不得轉載</p>
<p>
<a href="index.html">關于我們</a>
<a href="index.html">聯系我們</a>
<a href="index.html">幫助</a>
</p>
<p>Copyright © 2015</p>
</footer>
</body>
</html>
— hangge.css —
article, aside, figure, figcaption, footer, header, hgroup, nav, section, summary {
display: block;
}
body {
font-family: "Helvetica","Hiragino Sans GB","Microsoft Yahei", sans-serif;
max-width: px;
}
header {
background-color: #2D9900;
border: thin #336699 solid;
padding: px;
margin: px;
text-align: center;
}
header h1 {
margin: px;
color: white;
font-size: xx-large;
}
header h2 {
margin: px;
font-weight: bold;
}
header .Teaser {
font-size: large;
font-weight: bold;
}
header .Byline {
font-style: italic;
font-size: small;
margin: px;
}
.Content {
font-size: medium;
padding-top: px;
padding-bottom: px;
padding-left: px;
padding-right: px;
line-height: %;
}
.Content .LeadIn {
font-weight: bold;
font-size: large;
font-variant: small-caps;
}
.Content h2 {
color: #24486C;
margin-bottom: px;
font-size: medium;
}
.Content p {
margin-top: px;
}
footer {
text-align: center;
font-size: x-small;
}
footer .Disclaimer {
font-style: italic;
}
footer p {
margin: px;
}
原文:HTML5 - 簡單的上下布局頁面樣例
![蚪俠-遠端泛目錄[泛域名+泛目錄+泛内頁]-[代碼+漢字]幹擾-字型繁簡切換-蜘蛛欺騙-主動推送_鏡像版-V25版[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)