代码:
Acme United.html
<!doctype html>
<html lang="en">
<head>
<title>HTML5 Fundamentals Example</title>
<link rel="stylesheet" href="main-stylesheet.css" />
</head>
<body >
<header>
<hgroup>
<h1>Acme United</h1>
<h2>A Simple HTML5 Example</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<article>
<header>
<h1>
<a href="#" title="Link to this post" rel="bookmark">Article Heading</a> </h1>
</header>
<p>Primum non nocere ad vitam paramus tu quoque. Mutatis mutandis de gustibus et coloribus non est disputandum Ad infinitum, ad nauseum.</p>
<section>
<header>
<h1>This is the first section heading</h1>
</header>
<p>Scientia potentia est qua nocent docent ars longa, Vita brevis alea lacta est vici. P rimum non nocere quid pro quo. Audaces fortuna iuvat fortes fortuna adiuvat.</p>
</section>
<section>
<header>
<h1>Second section with mark, aside, menu & figure</h1>
</header>
<p class="next-to-aside">Ave Caesar morituri te salutant. <mark>veni, vidi, vici</mark>. Mater semper certa est, pater nunquam ignoramus et ignorabimus<br>
ergo sum e pluribus unum.</p>
<aside>
<p>This is an aside that has multiple lines.Primum non nocere ad vitam paramus tu quoque. Mutatis mutandis de gustibus et coloribus non est disputandum Ad infinitum, ad nauseum.</p>
</aside>
<menu label="File">
<button type="button" onClick="JavaScript:alert('Clio is the Muse of History')">Clio</button>
<button type="button" onClick="JavaScript:alert('Thalia is the Muse of Comedy')">Thalia</button>
<button type="button" onClick="JavaScript:alert('Urania is the Muse of Astronomy')">Urania</button>
<button type="button" onClick="JavaScript:alert('Calliope is the Muse of Epic poetry')">Calliope</button>
</menu>
<figure><img src="stonehenge.jpg" alt="Photograph of Stonehenge" width="200" height="131">
<figcaption>Figure 1. Stonehenge</figcaption>
</figure>
</section>
<section>
<header>
<h1>This is a video section</h1>
</header>
</section><section><p><video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" controls autoplay loop>
<div class="no-html5-video"><p>This video will work in Mozilla Firefox or Google Chrome only.</p></div>
</video></p>
</section>
</article>
<footer>
<p>© 2011 Acme United. All rights reserved.</p>
</footer>
</body>
</html>
CSS:
* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 800px;
margin: 0em auto;
}
header h1 {
font-size: 50px;
margin: 0px;
color: #006;
}
header h2 {
font-size: 15px;
margin: 0px;
color: #99f;
font-style: italic;
}
nav ul {
list-style: none;
padding: 0px;
display: block;
clear: right;
background-color: #99f;
padding-left: 4px;
height: 24px;
}
nav ul li {
display: inline;
padding: 0px 20px 5px 10px;
height: 24px;
border-right: 1px solid #ccc;
}
nav ul li a {
color: #006;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
article > header h1 {
font-size: 40px;
float: left;
margin-left: 14px;
}
article > header h1 a {
color: #000090;
text-decoration: none;
}
article > section header h1 {
font-size: 20px;
margin-left: 25px;
}
article p {
clear: both;
margin-top: 0px;
margin-left: 50px;
}
article p.next-to-aside {
width: 500px;
}
article > section figure {
margin-left: 180px;
margin-bottom: 30px;
}
article > section > menu {
margin-left: 120px;
}
aside p {
position:relative;
left:0px;
top: -100px;
z-index: 1;
width: 200px;
float: right;
font-style: italic;
color: #99f;
}
article > section video {
height: 200px;
margin-left: 180px;
}
article > section div.no-html5-video{
height: 20px;
text-align: center;
color: #000090;
font-size: 13px;
font-style: italic;
font-weight: bold ;
background-color: #99f;
}
footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}