完整示例

<!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. 设计模式---对象创建模式之工厂方法模式（Factory Method）

    前提:“对象创建”模式 通过“对象创建”模式绕开new,来避免对象创建(new)过程中所导致的紧耦合(依赖具体类),从而支持对象创建的稳定.它是接口抽象之后的第一步工作. 典型模式(表现最为突出) 工 ...

  2. Vue Admin - 基于 Vue & Bulma 后台管理面板

    Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...

  3. bzoj 1724 优先队列 切割木板

    倒着的石子合并,注意不是取当前最长木板贪心做,而是取当前最小累加答案: 例如 4 5 6 7 若按第一种思路:ans=22+15+9 第二种:ans=22+13+9,可以先从中间某一块分开,这样答案更 ...

  4. CSS——超链接颜色设置

    <!-- 链接颜色 --> a:link { color:#FF0000; text-decoration:underline; } a:visited { color:#00FF00; ...

  5. rest framework错误笔记——身份验证和权限

    按照官网教程(http://www.django-rest-framework.org/tutorial/4-authentication-and-permissions/)走到最后一步验证时,命令窗 ...

  6. idea的起步配置

    工欲善其事,必先利其器 1.安装 https://www.jetbrains.com/idea/download/#section=windows 可以选择不同平台的安装包,版本一般Ultimate, ...

  7. Freemarker取list集合中数据(将模板填充数据后写到客户端HTML)

    1.模板写法: <html> <head> <title>freemarker测试</title> </head> <body> ...

  8. DockerFile解析

    ⒈是什么? DockerFile是用来构建Docker镜像的构建文件,是由一系列命令和参数构成的脚本文件. ⒉步骤 ①手动编写一个符合规范的DockerFile文件(编写) ②使用docker bui ...

  9. STM32F103X datasheet学习笔记---Flexible static memory controller (FSMC)

    1.前言 FSMC模块能够与同步或异步存储器和16位PC存储器卡接口,它的主要作用是: 将AHB传输信号转换到适当的外部设备协议 满足访问外部设备的时序要求 所有的外部存储器共享控制器输出的地址.数据 ...

  10. Python3学习笔记14-迭代与列表生成式

    迭代 如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们称为迭代(Iteration) 在Python中,迭代是通过for...in来完成的. d = ...