完整示例

<!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. JavaSE考试前练习

    汽车租赁管理系统(CarRents)  120分钟 要求:请使用JavaEE实现一个汽车租赁管理系统,汽车租赁的属性主要包含:车牌(License).公里数(kilo).品牌(brand),租金(mo ...

  3. 多目标遗传算法 ------ NSGA-II （部分源码解析）两个个体支配判断 dominance.c

    /* Domination checking routines */ # include <stdio.h> # include <stdlib.h> # include &l ...

  4. ASP.Net WebAPI中添加helppage帮助页面

    一.自动创建带帮助的WebAPI 1.首先创建项目的时候选择WebAPI,如下图所示,生成的项目会自动生成帮助文档. 2.设置调用XML文档的代码 3.设置项目注释XML文档生成目录,项目——属性—— ...

  5. Python面向对象-day07

    写在前面 上课第七天,打卡: 时间的高效利用: 前言: 今天egon老师补充了下 is 和 == 的区别,整理如下:Python中变量的属性以及判断方法 一.面向过程和面向对象 - 1.面向过程 核心 ...

  6. uboot 如何向内核传递参数

    a.uboot 向内核传递的参数有两种类型 1.一个是bootargs 2.一个是环境参数, 而环境参数的设置靠的是 Y:\junda\JdLinuxApp\A1801_uboot\source\u- ...

  7. win10如何获得管理员权限_百度经验

    win10如何获得管理员权限_百度经验http://jingyan.baidu.com/article/0aa223755448db88cd0d6450.html 在右下方任务栏的“搜索web和win ...

  8. Python 入门基础13 --模块与包

    本节内容: 一.模块及使用 1.模块及使用 2.起别名.from导入 3.自执行与模块 二.包的使用 2.1 包中模块的使用:import 2.2 包的嵌套 2.3 包中模块的使用:from ...i ...

  9. ichartjs一分钟快速入门教程

    1.构建项目环境 由于ichartjs是一个js库,所以只要将ichart.js加入你页面的head中就完成了ichartjs的运行环境.代码如下: <script type="tex ...

  10. pandas 定位 loc,iloc,ix

    In [114]: df Out[114]: A B C D 2018-06-30 0.318501 0.613145 0.485612 0.918663 2018-07-31 0.614796 0. ...