完整示例

<!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. SpringBoot使用redis缓存List<Object>

    一.概述 最近在做性能优化,之前有一个业务是这样实现的: 1.温度报警后第三方通讯管理机直接把报警信息保存到数据库 2.我们在数据库中添加触发器,(BEFORE INSERT)根据这条报警信息处理业务 ...

  2. 面向对象【day07】：面向对象概念介绍（二）

    本节内容 1.概念 2.特性 3.面向对象介绍 一丶概念 1.面向对象编程 OOP(Object-Oriented Programming)编程是利用“类”和“对象”来创建各种模型来实现对真实世界的描 ...

  3. 函数和常用模块【day05】：装饰器前戏（二）

    本节内容 嵌套函数 局部作用域和全局作用域的访问顺序 一.嵌套函数 1.定义 在一个函数的函数体内,用def 去声明一个函数,而不是去调用其他函数,称为嵌套函数. 1 2 3 4 5 6 7 8 9 ...

  4. 设置MyBatis在控制台打印SQL语句

    在调试阶段,打印SQL会极大方便开发者.MyBatis有提供配置,只需要在MyBatis的配置文件mybatis-config.xml中<configuration>节点下,添加如下配置: ...

  5. Study 5 —— 流程控制

    if 条件: 满足条件后要执行的代码else: if条件不满足就执行这里 #_*_coding:utf-8_*_ ------------------------------------------- ...

  6. spring @Entity @Table

    import java.io.Serializable; import javax.persistence.Column; import javax.persistence.Entity; impor ...

  7. contourf和contour用法区别

    import numpy as np import matplotlib.pyplot as plt %matplotlib inline from matplotlib.colors import ...

  8. elementUI 表格设置表头样式

    eader-row-class-name 表头行的 className 的回调方法,也可以使用字符串为所有表头行设置一个固定的 className. Function({row, rowIndex}) ...

  9. # 20155337 2016-2017-2 《Java程序设计》第八周学习总结

    20155337 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 第14章 NIO与NIO2 NIO简介 NIO使用频道来衔接数据结点,在处理数据时,NIO可 ...

  10. .net 重新注册

    今天同事问 一个IIS 的监控站点 .net 出现问题:对于windows 一般都停留在重启生效思想:然并没有生效: 于是建议重新注册.NET : 一般出现原因: 在默认安装路径 重启注册: 默认的安 ...