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

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 - 简单的上下布局页面样例

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值