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 09Nakreslite 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ý
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:
Ak chcete začať s vytváraním rozloženia, vložte prvok kontajnera. Niekedy sa stáva, že sa môžete kontajner zbaviť neskôr, ale pre väčšinu rozložení s pevnou šírkou má mať kontajnerový prvok jednoduchšie spravovanie medzi rôznymi webovými prehliadačmi. Takže v tele dal to: A v štýle CSS štýlu, dal: Kontajner definuje, ako široký bude obsah webovej stránky, rovnako ako všetky okraje okolo vonkajšej strany a výplň z vnútra. Pre tento dokument je kontajner široký 870 pixlov s 20 pixelovým žlabom vľavo. Žľab je nastavený s okrajovým štýlom, ale výplň na kontajneri je vynulovaná, aby sa zabránilo tomu, že všetky prvky budú tak široké ako kontajner. #container { šírka: 870px; marža: 0 0 0 20px; / * hore vpravo dole doľava * / polstrovanie: 0; } Ak teraz uložíte svoj dokument, bude ťažké vidieť kontajner, pretože nemá nič v ňom. Ak pridáte text so zástupným symbolom, budete môcť vidieť prvok kontajnera jasnejšie. Ako sa rozhodnete štýlový riadok záhlavia závisí veľa na tom, čo je v ňom. Ak riadok hlavičky bude mať len grafické logo a nadpis, potom pomocou nadpisu značky ( HTML pre riadok hlavičky sa nachádza v hornej časti kontajnera a vyzerá takto: Potom pre nastavenie štýlov na ňom bol na spodnej strane pridaný červený okraj, aby ste mohli vidieť, kde sa končí, okraje a výplň boli vynulované, šírka nastavená na 100% a výška na 150px: #container h1 { rozpätie: 0; polstrovanie: 0; šírka: 100%; výška: 150px; plavák: vľavo; border-bottom: # c00 solid 3px; } Nezabudnite plávať tento prvok s plavákom: vľavo; vlastnosť. Kľúčom k písaniu rozložení CSS je plávať všetko - dokonca aj veci, ktoré majú rovnakú šírku ako kontajner. Týmto spôsobom vždy viete, kde budú prvky ležať na stránke. Volič potomkov CSS použil štýly iba na prvky H1, ktoré sú vnútri prvku #container. Keď vytvoríte rozvrhnutie v troch stĺpcoch so službou CSS, rozdeľte rozloženie na skupiny dvoch. Takže pre toto rozloženie v troch stĺpcoch je v strede a na pravom stĺpci zoskupené a umiestnené vedľa ľavého stĺpca rozloženie v dvoch stĺpcoch, kde je ľavý stĺpec široký 250 pixlov a pravý stĺpec má šírku 610 pixlov (300 pre každý stĺpec , plus 10px pre žľab medzi nimi). HTML vyzerá takto: Ut aliquip ex commodo consequat. Velit esse cillum dolore ut enim ad minim veniam, lorem ipsum dolor sit amet. Pri výbere vo voluptate quis naša výcvik eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi aliquip ex commodo consequat. Ut enim ad minim veniam, ktoré sa nachádzajú v dočasnom pracovnom pomere. Ut labore a dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Text zástupného symbolu v stĺpcoch spôsobuje, že boli pri testovaní viditeľné. CSS vyzerá takto: #container # col1 { šírka: 250px; plavák: vľavo; } #container # col2outer { šírka: 610px; plavák: vpravo; rozpätie: 0; polstrovanie: 0; } Stĺpec vľavo je posunutý doľava, zatiaľ čo druhý je posunutý doprava. Keďže celková šírka oboch stĺpcov je 860 pixlov, medzi nimi je 10-jamkový okraj. Ak chcete vytvoriť tri stĺpce, pridajte dve divs do širšieho druhého stĺpca, rovnako ako ste pridali 2 diely v stĺpci kontajnera v poslednom kroku. HTML vyzerá takto: Ut enim ad minim veniam, ktoré sa nachádzajú v dočasnom pracovnom pomere. Ut labore a dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Nam libero tempore, ktoré sa volajú ako aspernatur dicta sunt explicabo.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur a sapiente delectus, sed ut perspiciatis kde všetky časové úseky sú v laboratóriu a dolore. A CSS vyzerá takto: # col2outer # col2mid { šírka: 300px; plavák: vľavo; } # col2outer # col2side { šírka: 300px; plavák: vpravo; } Vzhľadom na to, že tieto dve šírky o šírke 300 pixelov sú vo vnútri širšieho boxu s rozmermi 610 pixlov, medzi nimi bude opäť 10-pólový žlab. Teraz, keď je štýl zostávajúcej stránky, môžete pridať do päty. Použite posledný div s ID "päty" a pridajte obsah, aby ste ho mohli vidieť. Môžete tiež pridať okraj v hornej časti, takže budete vedieť, kde začína. HTML: CSS: #container #footer {
plavák: vľavo;
šírka: 870px;
hraničný vrchol: # c00 solid 3px;
} 08 z 09 Po dokončení rozloženia môžete začať pridávať vlastné osobné štýly a obsah. Pamätajte, že hranice na hlavičke a päte boli pridané, aby sa zobrazili časti rozloženia, a nie konkrétne pre dizajn. Tu je celý dokument, HTML a CSS: Štýl kontajnera
Použite hlavnú značku hlavičky
) je viac zmysluplné ako použitie a
Moja hlavička
Ak chcete získať tri stĺpce, začnite budovaním dvoch stĺpcov
Pridajte dva stĺpce v rámci druhého širokého stĺpca
Pridať do päty
Pridajte svoje osobné štýly a obsah
Konečný HTML / CSS
