<< | 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;
  • 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
Zvětšit
  • Zobrazení v prohlížeči
Zvětšit

Doporučení

Zvětšit
RSS