<< | Přehled cvičení | >>
Zadání
- nastylujte stránku se zadanou strukturou pomocí CSS stylů podle předlohy
- pro pozicování bloků použijte obtékání
- pravidlo -
float : left; - pravidlo -
clear : both;
- pravidlo -
- v úvodu souboru styl.css použijte hvězdičkový reset
* {margin: 0; padding: 0;}
- použijte vlastní barevné ladění
Struktura stránky
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout - bloky s obtékáním</title>
<link href="styl.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="strana">
<div id="hlavicka"><h2>Záhlaví</h2></div>
<div id="menu">Menu</div>
<div class="mezera"></div>
<div class="sloupec">
a<br />
a<br />
a<br />
a
</div>
<div class="sloupec">
b<br />
b<br />
b
</div>
<div class="sloupec">
c<br />
c
</div>
<div class="mezera"></div>
<div id="pata">Pata</div>
</div>
</body>
</html>
Rozměry bloků
- strana - šířka 960px, centrovaný, horní okraj 10px
- menu - odsazení textu 10px
- sloupec - šířka 310px, odsazení zleva 9px
- mezera - výška 20px
Předloha stránky
- Zobrazení v MS Visual Web Developer
- Zobrazení v prohlížeči
Doporučení
- pro vývoj a kontrolu použijte systém MS Visual Web Developer 2010 Express
- nastavte okna podle obrázku
