Rozložení CSS vyžaduje, abyste uvažovali o rozvržení svých webových stránek jako celku, a pak je odeberte a spojte je dohromady. Naučte se, jak vytvořit jednoduché uspořádání tří sloupců pomocí CSS.
01 ze dne 09
Nakreslete rozložení
Rozvržení můžete nakreslit na papíře nebo v grafickém programu . Pokud již máte na mysli nějaký drátový rámeček nebo ještě rozsáhlejší návrh, zjednodušte ho na základní krabice, které tvoří stránku. Tento návrh, který doprovází tento článek má tři sloupce v hlavní oblasti obsahu, stejně jako záhlaví a zápatí. Pokud se podíváte pozorněji, můžete vidět, že tři sloupce nejsou stejné v šířce.
Po rozložení rozložení můžete začít rozmýšlet o rozměrech. Tento návrh příkladu bude mít následující základní rozměry:
- Ne šířka více než 900 pixelů
- 20 px žlab vlevo
- 10 px mezi sloupci a řádky
- Sloupce o šířce 250px, 300px a 300px
- Horní řádek je 150 pixelů vysoký
- Dolní řádek je 100 pixelů vysoký
02 ze dne 09
Napište základní HTML / CSS a vytvořte element kontejneru
Protože tato stránka bude platným dokumentem HTML, spusťte prázdný kontejner HTML
head> body> html>Přidejte do základních stylů CSS nulu okrajů, okrajů a paddings . Zatímco existují další standardní styly CSS pro nové dokumenty, tyto styly jsou minimum, které potřebujete k získání čistého rozložení. Přidejte je do hlavy dokumentu: