完整示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>HTML5布局</title>

    <style type="text/css">

        header, section, footer, aside, nav, article, figure, figcaption{

            display: block;}

        body{

            color:#666666;

            background-color: #f9f8f6;

            background-image: url("images/dark-wood.jpg");

            background-position: center;

            font-family: Georgia, Times, Serif;

            line-height: 1.4em;

            margin: 0px;}

        .wrapper{

            width: 940px;

            margin: 20px auto 20px auto;

            border: 2px solid #000000;

            background-color: #ffffff;}

        header{

            height: 160px;

            background-image: url("images/header.jpg");}

        h1{

            text-indent: -9999px;

            width: 940px;

            height: 130px;

            margin: 0px;}

        nav, footer{

            clear: both;

            color: #ffffff;

            background-color: #aeaca8;

            height: 30px;}

        nav ul{

            margin: 0px;

            padding: 5px 0px 5px 30px;}

        nav li{

            display: inline;

            margin-right: 40px;}

        nav li a{

            color: #ffffff;}

        nav li a:hover, nav li a.current{

            color: #000000;}

        section.courses{

            float: left;

            width: 659px;

            border-right: 1px solid #eeeeee;}

        article{

            clear: both;

            overflow: auto;

            width: 100%}

        hgroup{

            margin-top: 40px;}

        figure{

            float: left;

            width: 290px;

            height: 220px;

            padding: 5px;

            margin: 20px;

            border: 1px solid #eeeeee;}

        figcaption{

            font-size: 90%;

            text-align: left;}

        aside{

            width: 230px;

            float: left;

            padding: 0px 0px 0px 20px;}

        aside section a{

            display: block;

            padding: 10px;

            border-bottom: 1px solid #eeeeee;}

        aside section a:hover{

            color: #985d6a;

            background-color: #efefef;}

        a{

            color: #de6581;

            text-decoration: none;}

        h1, h2, h3{

            font-weight: normal;}

        h2{

            margin: 10px 0px 5px 0px;

            padding: 0px;}

        h3{

            margin: 0px 0px 0px 0px;

            color: #de6581;}

        aside h2 {

            padding: 30px 0px 10px 0px;

            color: #de6581;}

        footer{

            font-size: 80%;

            padding: 7px 0px 0px 20px;

        }

    </style>

    <!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

</head>

<body>

<div class="wrapper">

    <header>

        <h1>Yoko's Kitchen</h1>

        <nav>

            <ul>

                <li><a href="" class="current">home</a></li>

                <li><a href="">classes</a></li>

                <li><a href="">catering</a></li>

                <li><a href="">about</a></li>

                <li><a href="">contact</a></li>

            </ul>

        </nav>

    </header>

    <section class="courses">

        <article>

            <figure>

                <img src="data:images/bok-choi.jpg" alt="Bok Choi" />

                <figcaption>Bok Choi</figcaption>

            </figure>

            <hgroup>

                <h2>Japanese Vegetarian</h2>

                <h3>Five week course in London</h3>

            </hgroup>

            <p>A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle dishes.</p>

        </article>

        <article>

            <figure>

                <img src="data:images/teriyaki.jpg" alt="Teriyaki sauce" />

                <figcaption>Teriyaki Sauce</figcaption>

            </figure>

            <hgroup>

                <h2>Sauces Masterclass</h2>

                <h3>One day workshop</h3>

            </hgroup>

            <p>An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese cookery.</p>

        </article>

    </section>

    <aside>

        <section class="popular-recipes">

            <h2>Popular Recipes</h2>

            <a href="">Yakitori (grilled chicken)</a>

            <a href="">Tsukune (minced chicken patties)</a>

            <a href="">Okonomiyaki (savory pancakes)</a>

            <a href="">Mizutaki (chicken stew)</a>

        </section>

        <section class="contact-details">

            <h2>Contact</h2>

            <p>Yoko's Kitchen<br />

                27 Redchurch Street<br />

                Shoreditch<br />

                London E2 7DP</p>

        </section>

    </aside>

    <footer>

        © 2011 Yoko's Kitchen

    </footer>

</div><!-- .wrapper -->

</body>

</html>

　　

页眉和页脚

<header>

        <h1>Yoko's Kitchen</h1>

        <nav>

            <ul>

                <li><a href="" class="current">home</a></li>

                <li><a href="">classes</a></li>

                <li><a href="">catering</a></li>

                <li><a href="">about</a></li>

                <li><a href="">contact</a></li>

            </ul>

        </nav>

    </header>

　　

<footer>

        © 2011 Yoko's Kitchen

    </footer>

　　导航

<nav>

            <ul>

                <li><a href="" class="current">home</a></li>

                <li><a href="">classes</a></li>

                <li><a href="">catering</a></li>

                <li><a href="">about</a></li>

                <li><a href="">contact</a></li>

            </ul>

        </nav>

　　文章

<article>

            <figure>

                <img src="data:images/bok-choi.jpg" alt="Bok Choi" />

                <figcaption>Bok Choi</figcaption>

            </figure>

            <hgroup>

                <h2>Japanese Vegetarian</h2>

                <h3>Five week course in London</h3>

            </hgroup>

            <p>A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle dishes.</p>

        </article>

        <article>

            <figure>

                <img src="data:images/teriyaki.jpg" alt="Teriyaki sauce" />

                <figcaption>Teriyaki Sauce</figcaption>

            </figure>

            <hgroup>

                <h2>Sauces Masterclass</h2>

                <h3>One day workshop</h3>

            </hgroup>

            <p>An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese cookery.</p>

        </article>

　　附属信息

 <aside>

        <section class="popular-recipes">

            <h2>Popular Recipes</h2>

            <a href="">Yakitori (grilled chicken)</a>

            <a href="">Tsukune (minced chicken patties)</a>

            <a href="">Okonomiyaki (savory pancakes)</a>

            <a href="">Mizutaki (chicken stew)</a>

        </section>

        <section class="contact-details">

            <h2>Contact</h2>

            <p>Yoko's Kitchen<br />

                27 Redchurch Street<br />

                Shoreditch<br />

                London E2 7DP</p>

        </section>

    </aside>

　　部分

    <section class="courses">

        <article>

            <figure>

                <img src="data:images/bok-choi.jpg" alt="Bok Choi" />

                <figcaption>Bok Choi</figcaption>

            </figure>

            <hgroup>

                <h2>Japanese Vegetarian</h2>

                <h3>Five week course in London</h3>

            </hgroup>

            <p>A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle dishes.</p>

        </article>

        <article>

            <figure>

                <img src="data:images/teriyaki.jpg" alt="Teriyaki sauce" />

                <figcaption>Teriyaki Sauce</figcaption>

            </figure>

            <hgroup>

                <h2>Sauces Masterclass</h2>

                <h3>One day workshop</h3>

            </hgroup>

            <p>An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese cookery.</p>

        </article>

    </section>

　　标题组

<hgroup>

                <h2>Japanese Vegetarian</h2>

                <h3>Five week course in London</h3>

 </hgroup>

　　

图形

<figure>

                <img src="data:images/bok-choi.jpg" alt="Bok Choi" />

                <figcaption>Bok Choi</figcaption>

            </figure>

            <hgroup>

                <h2>Japanese Vegetarian</h2>

                <h3>Five week course in London</h3>

            </hgroup>

            <p>A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle dishes.</p>

        </article>

        <article>

            <figure>

                <img src="data:images/teriyaki.jpg" alt="Teriyaki sauce" />

                <figcaption>Teriyaki Sauce</figcaption>

            </figure>

　　分节元素

<div class="wrapper">

    <header>

        <h1>Yoko's Kitchen</h1>

        <nav>

            <ul>

                <li><a href="" class="current">home</a></li>

                <li><a href="">classes</a></li>

                <li><a href="">catering</a></li>

                <li><a href="">about</a></li>

                <li><a href="">contact</a></li>

            </ul>

        </nav>

    </header>

    <section class="courses">

        <article>

            <figure>

                <img src="data:images/bok-choi.jpg" alt="Bok Choi" />

                <figcaption>Bok Choi</figcaption>

            </figure>

            <hgroup>

                <h2>Japanese Vegetarian</h2>

                <h3>Five week course in London</h3>

            </hgroup>

            <p>A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle dishes.</p>

        </article>

        <article>

            <figure>

                <img src="data:images/teriyaki.jpg" alt="Teriyaki sauce" />

                <figcaption>Teriyaki Sauce</figcaption>

            </figure>

            <hgroup>

                <h2>Sauces Masterclass</h2>

                <h3>One day workshop</h3>

            </hgroup>

            <p>An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese cookery.</p>

        </article>

    </section>

    <aside>

        <section class="popular-recipes">

            <h2>Popular Recipes</h2>

            <a href="">Yakitori (grilled chicken)</a>

            <a href="">Tsukune (minced chicken patties)</a>

            <a href="">Okonomiyaki (savory pancakes)</a>

            <a href="">Mizutaki (chicken stew)</a>

        </section>

        <section class="contact-details">

            <h2>Contact</h2>

            <p>Yoko's Kitchen<br />

                27 Redchurch Street<br />

                Shoreditch<br />

                London E2 7DP</p>

        </section>

    </aside>

    <footer>

        © 2011 Yoko's Kitchen

    </footer>

</div>

　　为块级元素添加链接

<a href-"introduction.html">
<article>
    <figure>
        <img src="data:images/bok-choi.jpg" alt="Bok Choi"/>
        <figcaption>Bok Choi</figcaption>
    </figure>
    <hgroup〉
    <h2>Japanese Vegetarian</h2>
    <h3>Five week course in London</h3>
    </hgroup〉
    <p>A five week introduction to traditional
        Japanese vegetarian meals,teaching
        you a selection of rice and noodle
        dishes.</p〉
</article>
</a〉

　　

HTML5布局的更多相关文章

  1. Html5 布局方式

    在Html5之前,统一采用的是Div+css的方式进行布局,但是却和开发人员的命名方式,喜好有关.在新的Html5中,布局却显得更加人性化,更易理解了.如增加了Header,Footer,Sectio ...

  2. HTML5 布局标签

    HTML5是HTML标准的下一个版本.越来越多的程序员开始HTML5来构建网站,相对HTML4,HTML5新增的带有语义化的标签可以代替div进行页面布局(与html5.js结合起来时可以放心使用 ) ...

  3. 解决HTML5布局，兼容IE问题

    当我们使用h5的新标签,header,footer,aside,section,article...时,会遇到低版本IE不兼容问题,如下图: 解决方案:引入如下JS代码,即可 (这里我就直接放源码了, ...

  4. Html5 布局经验分享-第1集

    移动端的布局与pc端的布局相比 移动端的布局就简单的多,兼容性不必考虑那么多,css3各种特性基本上是可以放肆的写:(个人看法) 本人做移动web 布局一段时间了,把这其中遇到的一些问题总结下来,均是 ...

  5. 简单的html5布局

    <!DOCTYPE html><html><meta charset="utf-8"><head><style>html ...

  6. 一张图知道HTML5布局（图）

  7. HTML5布局篇

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  8. HTML5基本布局

    HTML4布局 HTML5布局 基本的HTML5文档的模式为: <!DOCTYPE html> <html lang = "en"> <head> ...

  9. html5新标签布局应用指南

    html5中为了便于设计者的网站布局新添加了一些标签,本文主要讲解这些标签的实际应用方法. 大多数前端的朋友在设计网站时主要应用<div>标签构造盒子进行布局,这是种非常高效的方法,可以将 ...

随机推荐

  1. Springmvc和poi3.9导出excel并弹出下载框

    Springmvc 和 poi3.9 用java程序从数据库导出数据到excel(在博客园的第一篇原创博客) @RequestMapping(value = "/importexcel.ht ...

  2. POJ - 1850 Code（组合数学）

    https://vjudge.net/problem/POJ-1850 题意 输出某字符串在字典中的位置.字符串不合规则时输出0. 分析 首先判断字符串合法性,也就是判断是不是升序排列的.如果符合,以 ...

  3. cdqz2017-test11-占卜的准备

    #include<cstdio> #include<iostream> #include<algorithm> using namespace std; #defi ...

  4. fffmgg

    翻译: 一.GOALS 你应该学习: 基本概念 安装ffmpeg和工具 编码视频 应用过滤器 分析视频 二.要求 这些幻灯片ffmpeg,ffprobe和ffplay的安装一些示例视频,例如:Big ...

  5. C# 修改编译版本的方法

  6. MyBatis全局配置文件mybatis-config.xml

    1.在官方下载的mybatis-3.4.5.zip压缩包中,有我们需要的mybatis核心jar包和mybatis的快速入门的pdf文件 在mybatis的快速入门的pdf文件中,复制如下代码到我们项 ...

  7. IT阅读——关于“业务”

    本文转自http://www.cnblogs.com/beijiguangyong/archive/2012/11/12/2767054.html 开发当中常常听说“业务”这个词,什么“业务为王”之类 ...

  8. 向GitHub上上传代码（转）

    使用git将项目上传到github(最简单方法)   首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装git工具,这里给出下 ...

  9. 洛谷4718【模板】Pollard-Rho算法

    传送门 Description: 给定T个数,分别求出它们的最大质因数 Solution: 其实大概框架是很容易想到的 对于一个数n 找到它的一个因数x 判断这个因数是不是质数 如果是质数就更新答案 ...

  10. Fragment add replace 区别

    首先获取FragmentTransaction对象:FragmentTransaction transaction = getFragmentManager().beginTransaction(); ...