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>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1.0, maximum-scale=1.0">
|
||||
<title>Normalize CSS</title>
|
||||
<link rel="stylesheet" href="normalize.css" />
|
||||
<link rel="stylesheet" href="normalize.metrics.css" />
|
||||
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<hgroup>
|
||||
<h1>
|
||||
Header Group Heading 1
|
||||
</h1>
|
||||
<h2>
|
||||
Header Group Heading 2
|
||||
</h2>
|
||||
</hgroup>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
First Page
|
||||
</li>
|
||||
<li>
|
||||
Second Page
|
||||
</li>
|
||||
<li>
|
||||
Third Page
|
||||
</li>
|
||||
<li>
|
||||
Last Page
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
|
||||
<title>Normalize CSS</title>
|
||||
<link rel="stylesheet" href="normalize.css">
|
||||
<link rel="stylesheet" href="normalize.metrics.css">
|
||||
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<hgroup>
|
||||
<h1>Grouped Heading 1</h1>
|
||||
<h2>Grouped Heading 2</h2>
|
||||
</hgroup>
|
||||
<nav>
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<h1>
|
||||
Section Heading 1
|
||||
</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.
|
||||
</p>
|
||||
<p>
|
||||
Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.
|
||||
</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>
|
||||
<section>
|
||||
<h1>Section Heading 1</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
|
||||
<p>Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.</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>
|
||||
<h4>
|
||||
Article Heading 4
|
||||
</h4>
|
||||
<p>
|
||||
Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.
|
||||
</p>
|
||||
<h5>
|
||||
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>
|
||||
<article>
|
||||
<h4>Article Heading 4</h4>
|
||||
<p>Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.</p>
|
||||
<h5>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>
|
||||
<li>
|
||||
Sed ut perspiciatis unde
|
||||
</li>
|
||||
<li>
|
||||
omnis iste natus error
|
||||
</li>
|
||||
<li>
|
||||
sit voluptatem accusantium
|
||||
</li>
|
||||
</ol>
|
||||
<p>
|
||||
The <a href="#">a element</a> example<br>
|
||||
The <abbr title="Title text">abbr element</abbr> example<br>
|
||||
The <b>b element</b> example<br>
|
||||
The <cite>cite element</cite> example<br>
|
||||
The <code>code element</code> example<br>
|
||||
The <del>del element</del> example<br>
|
||||
The <dfn>dfn element</dfn> example<br>
|
||||
The <em>em element</em> example<br>
|
||||
The <i>i element</i> example<br>
|
||||
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>
|
||||
<li>
|
||||
doloremque laudantium
|
||||
</li>
|
||||
<li>
|
||||
totam rem aperiam eaque
|
||||
</li>
|
||||
<li>
|
||||
ipsa quae ab illo
|
||||
</li>
|
||||
</ul>
|
||||
<address>Address: somewhere, World</address>
|
||||
|
||||
<dl>
|
||||
<dt>
|
||||
Definition list term #1
|
||||
</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>
|
||||
<blockquote>
|
||||
<p>Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.</p>
|
||||
</blockquote>
|
||||
|
||||
<nav>
|
||||
<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>
|
||||
<blockquote>Even better philosophical quote marked up with just a <blockquote> element.</blockquote>
|
||||
|
||||
<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>
|
||||
<cite>Confucius, The Confucian Cite</cite>, (551 BC - 479 BC)
|
||||
</p>
|
||||
<dl>
|
||||
<dt>Definition list term #1</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>
|
||||
|
||||
<table summary="Jimi Hendrix albums">
|
||||
<caption>
|
||||
Jimi Hendrix - albums
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Album</th>
|
||||
<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>
|
||||
<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre>
|
||||
<pre><code><html></code>
|
||||
<code><head></code>
|
||||
<code></head></code>
|
||||
<code><body></code>
|
||||
<code><div class="main"> <div></code>
|
||||
<code></body></code>
|
||||
<code></html></code></pre>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor <a href="#">a element</a> sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<table summary="Jimi Hendrix albums">
|
||||
<caption>Jimi Hendrix - albums</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Album</th>
|
||||
<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>
|
||||
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.
|
||||
</p>
|
||||
<form action="#">
|
||||
<fieldset>
|
||||
<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>
|
||||
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.
|
||||
</p>
|
||||
<div><label for="i12">Select field:</label><select id="i12"><option>Option 01</option><option>Option 02</option></select></div>
|
||||
<div><label for="i13">Textarea:</label><textarea id="i13" cols="30" rows="5" >Textarea text</textarea></div>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur <strong>strong element</strong> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
<div><input type="image" src="http://placehold.it/90x24" alt="Image (input)"></div>
|
||||
<div><input type="reset" value="Reset (input)"></div>
|
||||
<div><input type="button" value="Button (input)"></div>
|
||||
<div><input type="submit" value="Submit (input)"></div>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<div><button type="reset">Reset (button)</button></div>
|
||||
<div><button type="button">Button (button)</button></div>
|
||||
<div><button type="submit">Submit (button)</button></div>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<p>
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user