A Div-alapú webhely alapjai: 7 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:44

Ez az oktatóanyag megmutatja Önnek az alapokat, hogyan lehet div -ek segítségével weboldalt készíteni. Mert az elrendezéshez használt táblázatok gonoszak!: pHa ezt az utasítást megérti, ismernie kell az alapvető html -t és css -t. Ha valamit nem értesz, kérdezz bátran. Személyes honlapom is ezt a div struktúrát használja.

1. lépés: Hozza létre az alapvető fájlokat

Először hozza létre a html fájlt. Hozzáadjuk az alapokat. A css fájl egyelőre üres lesz.html fájl most tartalmazza: teszt Mentse el html fájlját valami.html néven. A nevet maga választhatja. A css fájlt.css néven kell menteni. Győződjön meg arról, hogy ugyanazt a nevet adja meg, mint a html fájlban. Ebben az esetben a "style.css". Most egy sima üres html -oldalunk van, amikor a böngészőnkben megtekintjük.

2. lépés: Szerkessze a törzscímkét az alapvető színekhez, betűtípusokhoz,…

Hagyjuk a html fájlt úgy, ahogy van, és csak a css fájlt szerkesszük. Adja hozzá a következő kódot a css fájlhoz: body {background: #444444; betűtípus-család: verdana, arial, sans-serif; szín: #444444; betűméret: 12 képpont; margin: 0px;} Ezzel a kóddal definiáljuk a body tag összes tulajdonságát. Mivel az összes tartalom a törzscímkében található, ezek a beállítások az egész oldalt érintik. A háttér és a betűtípus színe (színe) sötétszürkére van állítva. A betűtípuscsalád (betűtípus-család) verdana értékre van állítva. Ha a weboldalunk megtekintéséhez használt számítógép nem rendelkezik "verdana" betűtípussal, akkor webhelyünket "arial" betűtípussal jeleníti meg. További betűtípusokat is hozzáadhat a listához. A "sans-serif" az általános típus, amelyet akkor használnak, ha az Ön által megadott betűtípus nem volt elérhető. A betűméret (betűméret) 12 képpontra van állítva. Ez abszolút érték. Ha más betűméreteket (például fejléceket, bekezdéseket, menüelemeket stb.) Szeretne szerkeszteni, akkor a "px" helyett az "em" relatív egységet használhatja. Ily módon, ha át szeretné méretezni webhelyét, csak a törzs betűméretét kell megváltoztatnia. A margó 0 px -re van állítva a törzscímke mind a négy oldalán. Ennek célja annak biztosítása, hogy a webhely az ablak tetejéhez tapadjon.

3. lépés: Tartály hozzáadása fejléccel és tartalommal

Most hozzáadjuk a konténert. Ez egyszerűen egy központosított div, amely a teljes webhelyünket tartalmazza. Ebben a tárolóban további két div -et adunk hozzá; egy tartalom div és egy fejléc div. Html fájlunk így fog kinézni: teszt Tartalomfejléc A következő kódot adjuk hozzá a css fájlunkhoz: div#container {width: 800px; margin: 0px auto; háttér: #FFFFFF; padding: 0px;} div#content {width: 800px; padding-top: 100 képpont; háttér: sárga;} div#fejléc {szélesség: 800 képpont; magasság: 100 képpont; háttér: kék; pozíció: abszolút; felül: 0 képpont;}. egyértelmű javítás: a {tartalom: "." után; kijelző: blokk; magasság: 0; világos: mindkettő; láthatóság: rejtett;}. clearfix {display: inline-block;}/* Elrejtés az IE Mac elől \*/. clearfix {display: block;} div#container azt jelenti, hogy van egy div címkénk azonosítóval "container". Hozzáadunk néhány színt és egy "margin: 0px auto;" hogy a konténerünk az oldalon középre kerüljön. A tartalomnak egy padding-top, a fejlécnek pedig abszolút értéket kell adnunk "top: 0px" értékkel, hogy megbizonyosodjunk arról, hogy a fejléc a többi tartalom felett helyezkedik el. a csúnya színek. Csak azért, hogy megkönnyítsük a színek olvasását és a különböző div -ek megtekintését. Szükségünk lesz erre a furcsa clearfix kódra, hogy megbizonyosodjunk arról, hogy a navigációnk és a tartalom divs (a következő lépésben hozzáadva) nem esnek ki a környező div -ből.

4. lépés: Készítsen két divíziót a tartalomosztályban a navigációhoz és a tényleges tartalomhoz

Most hozzáadunk még két div -ot a tartalom div. Egy a navigációhoz, egy pedig a tényleges tartalomhoz. A content-tag között; hozzáadod az új kódot:

Navigáció Fő tartalom Hozzáadunk néhány css kódot a navigáció és a fő tartalom divs megjelenítéséhez; div#nav {width: 200px; balra lebeg; háttér: narancs;} div#maincontent {szélesség: 600 képpont; úszó: jobb; háttér: rózsaszín;} Ne feledje, hogy ez a két div mindkettő lebeg. Ha az előző lépésben nem adtuk volna meg az extra clearfix kódot, akkor a div -ek a környező div -on kívül lebegnének. A clearfix módszerrel biztosítjuk, hogy ez ne fordulhasson elő.

5. lépés: Adjon hozzá néhány extra div -ot a navigáció struktúrájához

Most hozzáadunk néhány extra div -ot a "nav" div -hez, hogy létrehozzunk valamilyen struktúrát a weboldalunkon. Változtassa meg a következő bitkódot:

• Foo
• Rúd

Most egy kódrészletet hirdetünk annak meghatározására, hogyan kell megjeleníteni a div "navblock" -t. Ne feledje, hogy a navblocknak osztálya van, nem azonosítója. Ennek oka egyszerű; Az azonosítóval rendelkező div -ek csak egyszer jelennek meg (navigációs blokk, fejléc, lábléc,…). Az osztályokkal rendelkező div -ek többször is megjeleníthetők. Itt egy osztályt használunk. Csak arra az esetre, ha később még egy navigációs blokkot szeretnénk hozzáadni.div.navblock {width: 180px; margó: 5 képpont automatikus; szegély: 1 képpont folytonos piros;} Ha újabb navigációs blokkot szeretnénk hozzáadni, akkor csak egy új… struktúrát kell hozzáadnia. A kód most így fog kinézni;

• Foo
• Rúd
• Lehurrogás
• Messze

6. lépés: Adjon hozzá néhány extra div -ot a fő tartalom struktúrájához

Most ugyanezt fogjuk tenni a maincontent div esetében is. A kód most így néz ki:

Lorem ipsum dolor sit amet, …

Ismét hozzáadunk egy kódrészletet a css fájlunkhoz, hogy meghatározzuk a div megjelenítési módját: div.contentblock {width: 580px; margó: 5 képpont automatikus; szegély: 1 képpont egyszínű fehér;} Most újabb tartalomblokkot adhatunk hozzá, ha a maincontent div -ben egy másik "…" -et adunk hozzá;

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementum dictum,…

7. lépés: Legyen a webhely kicsit kevésbé csúnya

Most a szórakoztató rész; színek. Most, hogy megvan a fő div struktúra, megváltoztathatjuk a színeket egy kicsit kevésbé kaotikus/csúnya/… Csak játsszon a css fájl színeivel. Itt van a képen megjelenő weboldal teljes html -fájlja: teszt

• Foo
• Rúd
• Lehurrogás
• Messze

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementum dictum,…

Fejléc És ez a teljes css fájl: body {background: #444444; betűtípus-család: verdana, arial, sans-serif; szín: #444444; betűméret: 12 képpont; margin: 0px;} div#container {szélesség: 800px; margin: 0px auto; háttér: #FFFFFF; padding: 0px;} div#content {width: 800px; padding-top: 100 képpont; háttér: #FFFFFF;} div #fejléc {szélesség: 800 képpont; magasság: 100 képpont; háttér: #888888; pozíció: abszolút; felül: 0 képpont;} div#nav {szélesség: 200 képpont; balra lebeg; háttér: #FFFFFF;} div #maincontent {szélesség: 600 képpont; úszó: jobb; háttér: #DDDDDD;} div.navblock {szélesség: 180 képpont; margó: 5 képpont automatikus; szegély: 1 képpont szilárd #DDDDDD;} div.contentblock {szélesség: 580 képpont; margó: 5 képpont automatikus; szegély: 1 képpont szilárd #FFFFFF;}. clearfix: {content: "." után; kijelző: blokk; magasság: 0; világos: mindkettő; láthatóság: rejtett;}. clearfix {display: inline-block;}/* Elrejtés az IE Mac elől \*/. clearfix {display: block;} Tehát most megvan az alap. Természetesen még sok mindent kell szerkeszteni, például a színeket, a betűméretet, a jobb megjelenésű navigációs blokkot,… De ez az utasítás csak a div szerkezetről szól. Ha más kapcsolódó utasításokat szeretne látni, bármikor megkérdezheti. Meglátom, találok -e időt.