The Very Basics of a Div-based Website: 7 Steps

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:25

Tento návod vám ukáže úplné základy toho, jak vytvořit web s divs. Protože tabulky použité pro rozložení jsou zlé!: p Abyste porozuměli tomuto pokynu, musíte znát základní html a css. Pokud něčemu nerozumíte, klidně se ptejte. Moje osobní domovská stránka také používá tento druh struktury div.

Krok 1: Vytvořte základní soubory

Nejprve vytvořte svůj html soubor. Přidáme k tomu samotné základy. Soubor css bude prozatím prázdný. Soubor nyní obsahuje: test Uložte soubor html jako něco.html. Název si můžete vybrat sami. Váš soubor css musí být uložen jako.css. Ujistěte se, že mu dáte stejný název, jaký je uveden v souboru html. V tomto případě "style.css". Nyní máme při náhledu v našem prohlížeči prostou prázdnou stránku html.

Krok 2: Upravte hlavní značku pro základní barvy, písma,…

Ponecháme soubor html tak, jak je, a upravíme pouze soubor css. Do souboru css přidejte následující kód: body {background: #444444; rodina písem: verdana, arial, sans-serif; barva: #444444; velikost písma: 12px; margin: 0px;} Tímto bitem kódu definujeme všechny vlastnosti tagu body. Protože je veškerý obsah v tagu body, tato nastavení ovlivní celou stránku. Pozadí a barva písma (barva) byly nastaveny na tmavě šedou. Rodina písem (rodina písem) byla nastavena na verdana. Pokud počítač používaný k prohlížení našich webových stránek nemá písmo „verdana“, zobrazí naše stránky písmem „arial“. Do seznamu můžete přidat další písma. „Bezpatkový“je obecný typ, který bude použit, pokud nebylo k dispozici zadané písmo. Velikost písma (velikost písma) byla nastavena na 12 pixelů. To je absolutní hodnota. Pokud chcete upravit jiné velikosti písma (například záhlaví, odstavce, položky nabídky, …), můžete místo „px“použít relativní jednotku „em“. Tímto způsobem, pokud chcete změnit velikost svého webu, budete muset pouze změnit velikost písma těla. Okraj byl nastaven na 0px pro všechny čtyři strany značky těla. To se provádí, aby se zajistilo, že se web přilepí k horní části okna.

Krok 3: Přidání kontejneru se záhlavím a obsahem

Nyní přidáme kontejner. Toto je prostě středový div, který bude obsahovat celý náš web. V tomto kontejneru přidáme další dva divy; div obsahu a záhlaví div. Náš html soubor bude nyní vypadat takto: test Content Header Do našeho css souboru přidáme následující kód: div#container {width: 800px; okraj: 0px auto; pozadí: #FFFFFF; padding: 0px;} div#content {width: 800px; padding-top: 100px; pozadí: žlutá;} div#hlavička {šířka: 800px; výška: 100px; pozadí: modrá; pozice: absolutní; nahoru: 0px;}. clearfix: po {content: "."; displej: blok; výška: 0; jasné: obojí; viditelnost: skrytá;}. clearfix {display: inline-block;}/* Skrýt v IE Mac \*/. clearfix {display: block;} div#kontejner znamená, že máme značku div s ID „kontejner“. Přidáme nějaké barvy a „margin: 0px auto;“abychom zajistili, že náš kontejner bude na stránce vycentrován. Musíme dát obsahu padding-top a záhlaví absolutní hodnotu s „top: 0px“, abychom se ujistili, že je záhlaví umístěno nad jiným obsahem. Nevadí ošklivé barvy. Je to jen proto, aby bylo snazší číst barvy a vidět různé divy. Tento podivný kód clearfix budeme potřebovat, abychom zajistili, že naše navigační a obsahové divy (přidané v dalším kroku) nevypadnou z okolního div.

Krok 4: Vytvořte dvě Divs v Content Div pro navigaci a skutečný obsah

Nyní přidáme další dva divy do div obsahu. Jeden pro navigaci a jeden pro skutečný obsah. Mezi tagem content; přidáte nový kód:

Hlavní obsah navigace Přidáme kód css pro zobrazení divů navigace a hlavního obsahu; div#nav {šířka: 200 pixelů; plavat vlevo; pozadí: oranžová;} div#maincontent {šířka: 600px; float: vpravo; background: pink;} Všimněte si skutečnosti, že tyto dva divy jsou plovoucí. Pokud bychom v předchozím kroku nevložili kód extra clearfix, div by se vznášel mimo okolní div. Pomocí metody clearfix zajistíme, aby se to nestalo.

Krok 5: Přidejte několik dalších divů pro strukturu v navigaci

Nyní přidáme do divu „nav“nějaké další divy, abychom na naší webové stránce vytvořili nějaký druh struktury. Změňte následující bit kódu:

• Foo
• Bar

Nyní vložíme kousek kódu, který definuje, jak se má div „navblock“zobrazovat. Všimněte si, že navblock má třídu, nikoli ID. Důvod je prostý; divs s id jsou zobrazeny pouze jednou (navigační blok, záhlaví, zápatí, …). Divs s třídami lze zobrazit více než jednou. Zde použijeme třídu. Pro případ, že bychom později chtěli přidat další navigační blok na.div.navblock {width: 180px; okraj: 5px auto; border: 1px plná červená;} Pokud chceme přidat další blok navigace, stačí přidat novou… strukturu. Váš kód bude nyní vypadat takto;

• Foo
• Bar
• Vypískat
• Daleko

Krok 6: Přidejte do hlavního obsahu několik dalších divs pro strukturu

Nyní uděláme to samé pro maincontent div. Kód nyní vypadá takto:

Lorem ipsum dolor sit amet,…

Do našeho souboru css opět přidáme kousek kódu, abychom určili, jak se má div zobrazit: div.contentblock {width: 580px; okraj: 5px auto; border: 1px solid white;} Nyní můžeme přidat další blok obsahu přidáním dalšího „…“do div main main content;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Krok 7: Udělejte web o něco méně ošklivým

Nyní zábavná část; barvy. Nyní, když máme hlavní div strukturu, můžeme změnit barvy na něco méně chaotického/ošklivého/… Jen si hrajte s barvami v souboru css. Zde je kompletní html soubor webové stránky zobrazený na obrázku: test

• Foo
• Bar
• Vypískat
• Daleko

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Záhlaví A toto je kompletní soubor css: body {background: #444444; rodina písem: verdana, arial, sans-serif; barva: #444444; velikost písma: 12px; okraj: 0px;} div#kontejner {šířka: 800px; okraj: 0px auto; pozadí: #FFFFFF; padding: 0px;} div#content {width: 800px; padding-top: 100px; pozadí: #FFFFFF;} div #záhlaví {šířka: 800px; výška: 100px; pozadí: #888888; pozice: absolutní; nahoře: 0px;} div#nav {šířka: 200px; plavat vlevo; pozadí: #FFFFFF;} div #maincontent {šířka: 600px; float: vpravo; pozadí: #DDDDDD;} div.navblock {šířka: 180px; okraj: 5px auto; ohraničení: 1px plné #DDDDDD;} div.contentblock {šířka: 580px; okraj: 5px auto; border: 1px solid #FFFFFF;}. clearfix: po {content: "."; displej: blok; výška: 0; jasné: obojí; visibility: hidden;}. clearfix {display: inline-block;}/* Skrýt v IE Mac \*/. clearfix {display: block;} Takže teď máte základy. Samozřejmě je stále co upravovat, jako jsou barvy, velikosti písem, lépe vypadající navigační blok, … Ale tento instructables je pouze o struktuře div. Pokud byste chtěli vidět další související pokyny, můžete se kdykoli zeptat. Uvidím, jestli si najdu čas.