|
== Mise en application ==
Voici un exemple de styles de mise en forme avec un menu, un centre de page et un bas de page. La page se compose de trois calques < code><nowikisyntaxhighlight lang="html" inline><div></ nowiki></codesyntaxhighlight> les uns derrière les autres. Les blocs sont modulables : peu importe l'ordre dans lequel on les écrit, on obtient le même rendu final.
<syntaxhighlight lang="html">
{{gris|<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<nowiki>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</nowiki>">
<<!DOCTYPE html xmlns{{=}}PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<nowiki>http://www.w3.org/1999TR/xhtml<xhtml1/nowiki>DTD/xhtml1-strict.dtd" xml:lang{{=}}"fr" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<<head>
<<title>Titre</title>
<<meta http-equiv{{=}}"Content-Type" content{{=}}"text/html; charset{{=}}iso-8859-1" />}}
{{vert|<<style}} type="text/css"{{vert|>}}
{{bleu|.un
{}}
position: absolute;
top: 20px; left: 20px; width: 100px; height: 100px
{{bleu|} }}
{{bleu|.deux
{}}
position: absolute;
top: 20px; left: 50%; width: 100px; height: 200px
{{bleu|} }}
{{bleu|.trois
{}}
position: absolute;
bottom: 20px; left: 20px; width: 100px; height: 20px
{{bleu|} }}
{{vert|<</style>}}
{{gris|<</head>
{{vert|<<div }} class="un" {{vert|> }}▼
<p>menu</p>
▲ {{vert|<div}} class="un"{{vert|>}}
{{bleu|<p>}}menu{{bleu|</p>}}
{{vert|</<div class="deux">}}
{{bleu|<<p> }}centre {{bleu|<</p> }}▼
{{vert|<div}} class="deux"{{vert|>}}
</div>
▲ {{bleu|<p>}}centre{{bleu|</p>}}
{{vert|</<div class="trois">}}
{{bleu|<<p> }}bas de page {{bleu|<</p> }}▼
{{vert|<div}} class="trois"{{vert|>}}
</div>
▲ {{bleu|<p>}}bas de page{{bleu|</p>}}
</syntaxhighlight>
== Voir aussi ==
| 