您的位置：首页 > Web前端 > HTML5

HTML5 - 简单的上下布局页面样例

2016-03-17 13:13 836 查看

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: 700px;
}

header {
background-color: #2D9900;
border: thin #336699 solid;
padding: 10px;
margin: 10px;
text-align: center;
}

header h1 {
margin: 0px;
color: white;
font-size: xx-large;
}

header h2 {
margin: 0px;
font-weight: bold;
}

header .Teaser {
font-size: large;
font-weight: bold;
}

header .Byline {
font-style: italic;
font-size: small;
margin: 0px;
}

.Content {
font-size: medium;
padding-top: 20px;
padding-bottom: 5px;
padding-left: 50px;
padding-right: 50px;
line-height: 120%;
}

.Content .LeadIn {
font-weight: bold;
font-size: large;
font-variant: small-caps;
}

.Content h2 {
color: #24486C;
margin-bottom: 2px;
font-size: medium;
}

.Content p {
margin-top: 0px;
}

footer {
text-align: center;
font-size: x-small;
}

footer .Disclaimer {
font-style: italic;
}

footer p {
margin: 3px;
}

原文:HTML5 - 简单的上下布局页面样例

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航