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

By | 03月17日
Advertisement

1,下面是一个简单的上下布局样例:
HTML5 - 简单的上下布局页面样例

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

Similar Posts:

  • 最简单的视音频播放演示样例4:Direct3D播放RGB(通过Texture)

    ===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频播放演示样例2:GDI播放YUV, RGB 最简单的视音频播放演示样例3:Direct3D播放YUV,RGB(通过Surface) 最简单的视音频播放演示样例4:Direct3D播放RGB(通过Texture) 最简单的视音频播放演示样例5:OpenGL播放RGB/YUV 最简单的视音频播放演示样例

  • Jquery分页插件jqPagination的使用以及简单样例

    一.背景 因为本人的前端技术实在是渣的没法看了,所有碰到分页这种问题还是决定找一些现成的插件来解决,当时在简单Baidu之后,决定使用JqPagination这一款基于Jquery的插件,但是只是因为比较喜欢它的简单界面但是在实际接触之后发现文档好少,虽然最后在成功使用这一插件之后觉得确实是小白都可以使用的,但是对于一些Jquery甚至Js基础比较差的朋友,还是会花费一定的时间的,在这里不得不吐槽好多博主只是把国外的说明拿下来,一点自己的见解都没有.好了,话不多少,开始下面的内容. 二.JqPa

  • java实现简单的单点登录(2)-Web SSO 的样例

    3.1 Web SSO 的样例 根据上面的原理,我用J2EE的技术(JSP和Servlet)完成了一个具有Web-SSO的简单样例.样例包含一个身份认证的服务器和两个简单的Web应用,使得这两个 Web应用通过统一的身份认证服务来完成Web-SSO的功能.此样例所有的源代码和二进制代码都可以从网站地址http://gceclub.sun.com.cn/wangyu/ 下载. 样例下载.安装部署和运行指南: Web-SSO的样例是由三个标准Web应用组成,压缩成三个zip文件,从http://gc

  • Linux下pthread简单样例

    Linux下pthread简单样例 mypthread.c /***************************** * this file name is mypthread.c *compile:gcc -o p.out -lpthread mypthread.c * *run:./p.out * *****************************/ #include <stdio.h> #include <stdlib.h> #include <pthrea

  • 简单div+css布局之二

    续简单的div+css的布局之一 left-top.gif right-top.gif right.gif left-bottom.gif right-bottom.gif p3 实例 3 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <st

  • PMD 自定义规则实践入门样例

    原文:https://testerhome.com/topics/4918 准备工作 首先在PMD官网下载最新版本的文件,目前最新版本是5.4.1.  下载pmd-bin-5.4.1.zip和pmd-src-5.4.1.zip之后解压备用.  pmd-src-5.4.1是PMD源码包,是无法直接执行的.  pmd-bin-5.4.1是PMD的可执行包. 目录简介 pmd-bin-5.4.1[PMD可执行版本] bin designer.bat[界面工具,能将java源代码转化为AST(抽象语法树

  • 关于peersim样例配置文件的超详细解读(新手勿喷)

    相信很多兄弟一开始接触peersim,对配置文件还是有点不适应,我看了好久的样例的配置文件,一层层去找对应的文件的方法,终于好像悟懂了一点,记下来以后回顾. 贴上代码,一点点分析. 首先要说下所谓的配置文件,其实就是一个txt文件,语法也是非常简单,类似java里的给类里的变量赋值,这也正对应了配置文件的作用,配置文件,当然就是为实验的参数进行配置用的,所以配置文件的主要功能就是配置各类参数,定义一些协议类.控制类.初始化类以及一些常数. 1 # PEERSIM EXAMPLE 1 #配置文件中

  • Java 连接 Hive的样例程序及解析

    以后编程基于这个样例可节省查阅API的时间. private static String driverName = "org.apache.hadoop.hive.jdbc.HiveDriver"; try{ Class.forName(driverName);//取得数据驱动,应用不同的数据驱动可以用不同的class路径. }catch (ClassNotFoundException e){ e.printStackTrack();//optional System.exit(1);

  • [置顶] gdb系列之一 一个GDB会话样例

     翻译:shyboysby.spaces.live.com 本翻译遵从GPL.参见: gdb is free software, protected by the gnu General Public License (GPL). The GPL gives you the freedom to copy or adapt a licensed program-but every person getting a copy also gets with it the freedom to m

  • 很好的理解遗传算法的样例

    遗传算法的手工模拟计算演示样例 为更好地理解遗传算法的运算过程,以下用手工计算来简单地模拟遗传算法的各 个主要运行步骤. 例:求下述二元函数的最大值: (1) 个体编码 遗传算法的运算对象是表示个体的符号串,所以必须把变量 x1, x2 编码为一种 符号串.本题中,用无符号二进制整数来表示. 因 x1, x2 为 0 ~ 7之间的整数,所以分别用3位无符号二进制整数来表示,将它 们连接在一起所组成的6位无符号二进制数就形成了个体的基因型,表示一个可 行解. 比如,基因型 X=101110 所相应

Tags: