Rozloženie CSS vyžaduje, aby ste premýšľali o rozložení vašich webových stránok ako celku a potom ich odneste a zložte. Naučte sa, ako vytvoriť jednoduché rozloženie v 3 stĺpcoch pomocou CSS.
01 z 09
Nakreslite rozloženie
Rozloženie môžete nakresliť na papieri alebo v grafickom programe . Ak už máte na mysli drôtený rám alebo ešte rozsiahlejší dizajn, zjednodušte ho do základných políčok, ktoré tvoria daný web. Tento dizajn, ktorý je priložený k tomuto článku, obsahuje tri stĺpce v hlavnej oblasti obsahu, ako aj hlavičku a pätu. Ak sa pozriete pozorne, môžete vidieť, že tri stĺpce nie sú v rovnakej šírke.
Po rozložení rozloženia môžete začať premýšľať o rozmeroch. Tento návrh príkladu bude mať tieto základné rozmery:
- Nie je viac ako 900 pixelov
- Zárez 20 px vľavo
- 10 px medzi stĺpcami a riadkami
- Stĺpce so šírkou 250px, 300px a 300px
- Horný riadok je 150 pixelov vysoký
- Spodný riadok je 100 pixelov vysoký
02 z 09
Napíšte základné HTML / CSS a vytvorte kontajnerový prvok
Keďže táto stránka bude platným dokumentom HTML, začnite s prázdnym kontajnerom HTML
Pridajte do základných štýlov CSS, aby ste vynulovali okraje, okraje a výplne stránok . Aj keď existujú iné štandardné štýly CSS pre nové dokumenty, tieto štýly sú minimálne, ktoré potrebujete na získanie čistého rozloženia. Pridajte ich do hlava dokumentu: