mirror of
https://github.com/necolas/normalize.css.git
synced 2024-12-25 15:14:19 +00:00
Edit demo file; addition of <form> elements, <mark>, <blockquote>, and clearer inline element tests.
This commit is contained in:
Nicolas Gallagher
parent
4fdeb702f1
commit
25d2e3e421
367
demo.html
367
demo.html
@ -1,225 +1,178 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1.0, maximum-scale=1.0">
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
|
||||||
<title>Normalize CSS</title>
|
<title>Normalize CSS</title>
|
||||||
<link rel="stylesheet" href="normalize.css" />
|
<link rel="stylesheet" href="normalize.css">
|
||||||
<link rel="stylesheet" href="normalize.metrics.css" />
|
<link rel="stylesheet" href="normalize.metrics.css">
|
||||||
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<hgroup>
|
<hgroup>
|
||||||
<h1>
|
<h1>Grouped Heading 1</h1>
|
||||||
Header Group Heading 1
|
<h2>Grouped Heading 2</h2>
|
||||||
</h1>
|
</hgroup>
|
||||||
<h2>
|
<nav>
|
||||||
Header Group Heading 2
|
<ul>
|
||||||
</h2>
|
<li><a href="#">navigation item #1</a></li>
|
||||||
</hgroup>
|
<li><a href="#">navigation item #2</a></li>
|
||||||
<nav>
|
<li><a href="#">navigation item #3</a></li>
|
||||||
<ul>
|
</ul>
|
||||||
<li>
|
</nav>
|
||||||
First Page
|
</header>
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Second Page
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Third Page
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Last Page
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h1>
|
<h1>Section Heading 1</h1>
|
||||||
Section Heading 1
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
|
||||||
</h1>
|
<p>Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.</p>
|
||||||
<p>
|
<h2>Section Heading 2</h2>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.
|
<p>Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.</p>
|
||||||
</p>
|
<h3>Section Heading 3</h3>
|
||||||
<p>
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
|
||||||
Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.
|
</section>
|
||||||
</p>
|
|
||||||
<h2>
|
|
||||||
Section Heading 2
|
|
||||||
</h2>
|
|
||||||
<p>
|
|
||||||
Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.
|
|
||||||
</p>
|
|
||||||
<h3>
|
|
||||||
Section Heading 3
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
<h4>
|
<h4>Article Heading 4</h4>
|
||||||
Article Heading 4
|
<p>Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.</p>
|
||||||
</h4>
|
<h5>Article Heading 5</h5>
|
||||||
<p>
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
|
||||||
Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.
|
<h6>Article Heading 6</h6>
|
||||||
</p>
|
<p>Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.</p>
|
||||||
<h5>
|
</article>
|
||||||
Article Heading 5
|
|
||||||
</h5>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.
|
|
||||||
</p>
|
|
||||||
<h6>
|
|
||||||
Article Heading 6
|
|
||||||
</h6>
|
|
||||||
<p>
|
|
||||||
Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<ol>
|
<p>
|
||||||
<li>
|
The <a href="#">a element</a> example<br>
|
||||||
Sed ut perspiciatis unde
|
The <abbr title="Title text">abbr element</abbr> example<br>
|
||||||
</li>
|
The <b>b element</b> example<br>
|
||||||
<li>
|
The <cite>cite element</cite> example<br>
|
||||||
omnis iste natus error
|
The <code>code element</code> example<br>
|
||||||
</li>
|
The <del>del element</del> example<br>
|
||||||
<li>
|
The <dfn>dfn element</dfn> example<br>
|
||||||
sit voluptatem accusantium
|
The <em>em element</em> example<br>
|
||||||
</li>
|
The <i>i element</i> example<br>
|
||||||
</ol>
|
The img element <img src="http://placehold.it/16x16" alt=""> example<br>
|
||||||
|
The <ins>ins element</ins> example<br>
|
||||||
|
The <kbd>kbd element</kbd> example<br>
|
||||||
|
The <mark>mark element</mark> example<br>
|
||||||
|
The <q>q element <q>inside</q> a q element</q> example<br>
|
||||||
|
The <s>s element</s> example<br>
|
||||||
|
The <samp>samp element</samp> example<br>
|
||||||
|
The <small>small element</small> example<br>
|
||||||
|
The <span>span element</span> example<br>
|
||||||
|
The <strike>strike element</strike> example<br>
|
||||||
|
The <strong>strong element</strong> example<br>
|
||||||
|
The <sub>sub element</sub> example<br>
|
||||||
|
The <sup>sup element</sup> example<br>
|
||||||
|
The <var>var element</var> example<br>
|
||||||
|
The <u>u element</u> example
|
||||||
|
</p>
|
||||||
|
|
||||||
<ul>
|
<address>Address: somewhere, World</address>
|
||||||
<li>
|
|
||||||
doloremque laudantium
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
totam rem aperiam eaque
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
ipsa quae ab illo
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<dl>
|
<blockquote>
|
||||||
<dt>
|
<p>Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.</p>
|
||||||
Definition list term #1
|
</blockquote>
|
||||||
</dt>
|
|
||||||
<dd>
|
|
||||||
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
||||||
</dd>
|
|
||||||
<dt>
|
|
||||||
Definition list term #2
|
|
||||||
</dt>
|
|
||||||
<dd>
|
|
||||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
|
|
||||||
<nav>
|
<blockquote>Even better philosophical quote marked up with just a <blockquote> element.</blockquote>
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="#">navigation item #1</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">navigation item #2</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#">navigation item #3</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</pre>
|
<ol>
|
||||||
|
<li>Sed ut perspiciatis unde</li>
|
||||||
|
<li>omnis iste natus error</li>
|
||||||
|
<li>sit voluptatem accusantium</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
<div class="spacer"></div>
|
<ul>
|
||||||
|
<li>doloremque laudantium</li>
|
||||||
|
<li>totam rem aperiam eaque</li>
|
||||||
|
<li>ipsa quae ab illo</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<p>
|
<dl>
|
||||||
<cite>Confucius, The Confucian Cite</cite>, (551 BC - 479 BC)
|
<dt>Definition list term #1</dt>
|
||||||
</p>
|
<dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
|
||||||
|
<dt>Definition list term #2</dt>
|
||||||
|
<dd>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
<table summary="Jimi Hendrix albums">
|
<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre>
|
||||||
<caption>
|
<pre><code><html></code>
|
||||||
Jimi Hendrix - albums
|
<code><head></code>
|
||||||
</caption>
|
<code></head></code>
|
||||||
<thead>
|
<code><body></code>
|
||||||
<tr>
|
<code><div class="main"> <div></code>
|
||||||
<th>Album</th>
|
<code></body></code>
|
||||||
<th>Year</th>
|
<code></html></code></pre>
|
||||||
<th>Price</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<th>Album</th>
|
|
||||||
<th>Year</th>
|
|
||||||
<th>Price</th>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>Are You Experienced</td>
|
|
||||||
<td>1967</td>
|
|
||||||
<td>$10.00</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Axis: Bold as Love</td>
|
|
||||||
<td>1967</td>
|
|
||||||
<td>$12.00</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Electric Ladyland</td>
|
|
||||||
<td>1968</td>
|
|
||||||
<td>$10.00</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Band of Gypsys</td>
|
|
||||||
<td>1970</td>
|
|
||||||
<td>$12.00</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<p>
|
<table summary="Jimi Hendrix albums">
|
||||||
Lorem ipsum dolor <a href="#">a element</a> sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
<caption>Jimi Hendrix - albums</caption>
|
||||||
</p>
|
<thead>
|
||||||
<p>
|
<tr>
|
||||||
Lorem ipsum dolor sit amet, consectetur <abbr title="Title text">abbr element</abbr> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
<th>Album</th>
|
||||||
</p>
|
<th>Year</th>
|
||||||
|
<th>Price</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th>Album</th>
|
||||||
|
<th>Year</th>
|
||||||
|
<th>Price</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Are You Experienced</td>
|
||||||
|
<td>1967</td>
|
||||||
|
<td>$10.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Axis: Bold as Love</td>
|
||||||
|
<td>1967</td>
|
||||||
|
<td>$12.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Electric Ladyland</td>
|
||||||
|
<td>1968</td>
|
||||||
|
<td>$10.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Band of Gypsys</td>
|
||||||
|
<td>1970</td>
|
||||||
|
<td>$12.00</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
<p>
|
<form action="#">
|
||||||
Lorem ipsum dolor <b>b element</b> sit amet, consectetur <i>i element</i> adipisicing elit, sed <s>s element</s> do eiusmod tempor <u>u element</u> incididunt ut labore et dolore magna aliqua.
|
<fieldset>
|
||||||
</p>
|
<legend>Form legend</legend>
|
||||||
|
<div><label for="i1">Optional Text input:</label><input type="text" id="i1" value="input text"></div>
|
||||||
|
<div><label for="i2">Required Text input:</label><input type="text" id="i2" required></div>
|
||||||
|
<div><label for="i3">Text input with pattern requirement and placeholder:</label><input type="text" id="i3" pattern="\d{5}(-\d{4})?" title="a US Zip code, with or without the +4 exension" placeholder="12345-6789"></div>
|
||||||
|
<div><label for="i4">Search input:</label><input type="search" id="i4"></div>
|
||||||
|
<div><label for="i5">Email input:</label><input type="email" id="i5"></div>
|
||||||
|
<div><label for="i6">URL input:</label><input type="url" id="i6"></div>
|
||||||
|
<div><label for="i7">Password input:</label><input type="password" id="i7" value="password"></div>
|
||||||
|
<div><label for="i8">Radio input:</label><input type="radio" id="i8"></div>
|
||||||
|
<div><label for="i9">Checkbox input:</label><input type="checkbox" id="i9"></div>
|
||||||
|
<div><input type="radio" id="i10"><label for="i10">Radio input</label></div>
|
||||||
|
<div><input type="checkbox" id="i11"><label for="i11">Checkbox input</label></div>
|
||||||
|
|
||||||
<p>
|
<div><label for="i12">Select field:</label><select id="i12"><option>Option 01</option><option>Option 02</option></select></div>
|
||||||
Lorem ipsum dolor <code>code element</code> sit amet, consectetur <kbd>kbd element</kbd> adipisicing elit, sed <samp>samp element</samp> do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
<div><label for="i13">Textarea:</label><textarea id="i13" cols="30" rows="5" >Textarea text</textarea></div>
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
<div><input type="image" src="http://placehold.it/90x24" alt="Image (input)"></div>
|
||||||
Lorem ipsum dolor sit amet, consectetur <strong>strong element</strong> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
<div><input type="reset" value="Reset (input)"></div>
|
||||||
</p>
|
<div><input type="button" value="Button (input)"></div>
|
||||||
|
<div><input type="submit" value="Submit (input)"></div>
|
||||||
|
|
||||||
<p>
|
<div><button type="reset">Reset (button)</button></div>
|
||||||
Lorem ipsum dolor <cite>cite element</cite> sit amet, consectetur <dfn>dfn element</dfn> adipisicing elit, sed <em>em element</em> do eiusmod tempor <q>q element</q> incididunt ut labore <var>var element</var> et dolore magna aliqua.
|
<div><button type="button">Button (button)</button></div>
|
||||||
</p>
|
<div><button type="submit">Submit (button)</button></div>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
|
||||||
<p>
|
</body>
|
||||||
Lorem ipsum dolor sit amet, consectetur <del>del element</del> adipisicing elit, sed <strike>strike element</strike> do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur <ins>ins element</ins> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <sub>sub element</sub> do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore <sup>sup element</sup> et dolore magna aliqua.
|
|
||||||
</p>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user