div elrendezés
Div elrendezés - Készítsen egy két hasábos elrendezés blokkok HTML határozza meg azok méretét és állítsa elhelyezése CSS
Hello, kedves blog olvasói KtoNaNovenkogo.ru. Az első cikk a blokk elrendezés. Próbáltam elkezd beszélni annak elveit, de sajnos volt sok, hogy elvonja a magyarázatot alapfogalmak vebmasteringa.
Tényleg nem akartam, hogy figyelmen kívül hagyja ezeket az alapvető dolgokat, és nagyon sajnálom, hogy azok, akik már tudta ezt, és azt akarta hallani beszélni az elrendezés a helyszínen, és nem hallható.
Ebben a cikkben megpróbálom utolérni és javítása. Remélem, hogy nem kell eltérni sokat a fő téma. Nos, bocsánatkérés és a bűnbánat, azt feltételezzük, hogy vége, és itt az ideje, hogy végre közvetlenül az oka.
Hozzon létre egy oldal elrendezését a 2. oszlopban DIV-alapú elrendezés
Tehát, egy korábbi cikkben, hoztunk létre a tárhely (bár erre a célra rendben van, és a helyi szerver Denver majd egy e-mailt annak képességeit.) TEST mappát, amelybe a kettőt főfájl jövőnk elrendezése: Index.html és style.css. Ami azt illeti, lesz a legegyszerűbb változata a keret.
Ismét valószínűleg keveset, hogy elvonja a közvetlen bevezetését, mert Nem mindenki lehet világos, hogyan kell létrehozni egy tesztmappát a gyökérkönyvtárban található, amely egy igazi gazda. Csakúgy, mint mi ez - a gyökere a helyén, és hol kell keresni neki elérhető FTP. De tényleg, nem az a kérdés triviális a felhasználó számára, az első alkalommal szembesül tárhely.
Tehát akkor kell először csatlakozik FTP-n keresztül. Az adatok kapcsolódni FTP-n keresztül meg kellett mondani, hogy a tárhely szolgáltató (itt olvasható arról a tényről, hogy a tárhely általában, de itt arról a vásárlás).
Miután csatlakozik FTP-n keresztül (használom erre a célra a program FileZilla - van róla a teljes igazságot írva, és hogy például mind mondani), a jobb oldali a program ablakban, látni fogja a tartalmát egy könyvtárba, amely számára tárhelyszolgáltatóját a oldalak, szkriptek és hasonló dolgok.
Azonban ez a könyvtár nem lesz a gyökér mappában. A gyökér kell lennie index.php, valamint az összes többi fájlok és mappák használt motor.
Erre a célra egy külön könyvtárba, de a neve, attól függően, hogy az adott fogadó eltérő lehet. A szerkezet a belső mappát a home könyvtár (megjelenik, ha csatlakozunk FTP hely) is különböző lehet, de a lényeg ugyanaz marad.
Például, akkor a következő képet látja:
motor fájlokat kell másolni nem a legfelső könyvtár, áll az Ön FTP-n keresztül, és az úgynevezett gyökér mappát. Honnan tudod, hogy melyik könyvtárakat közölt van egy gyökér?
Nos, szélsőséges esetben, akkor kérheti a tulajdonos a tárhely. És, hogy szükség van rájuk, hogy segítsek az ilyen ügyekben. De valójában, gyakran fogják hívni, vagy public_html vagy htdocs.
Ha egy ilyen könyvtár nem található, akkor meg kell kérni a tárhely tulajdonosa, és ha valami, mint ez nem áll rendelkezésre, akkor ez a közmondásos gyökere, és ez az, ahol létre kell hoznia a szenvedést mappát a vizsgálat, amelynek én írtam, és te Remélem, miután elolvasta ezeket néhány bekezdésben.
Hogyan hozzunk létre egy könyvtárat FileZilla programot? Igen, nagyon egyszerű. Csak akkor van szükség, hogy nyissa ki a jobb oldali Konev könyvtárban a program, majd kattintson egy üres hely a jobb gombbal, és válassza ki a „Create könyvtár” a felugró menüből.
Pfuj, létrehoztunk tesztmappát kanyaró könyvtár helyén. És kösz, hogy. Általánosságban elmondható, hogy lehetséges volt, és nem zavarja. Hogy érti ezt? És ennyi. TEST könyvtárban lehetne létrehozni bármilyen belső webhely mappát, de ez még könnyebb legyen a gyökér.
A helyi szerver Denver akkor létre kell hozni a TEST mappát a következő könyvtárat:
A fenébe is, ha minden olyan részletes számla, akkor kap egy kis könyvet a blokk elrendezés, és a legtöbb meg kell szentelni az alapokat vebmasteringa, de a másik nem tud írni, használt feldolgozni az összes árnyalatokat a polcokon. Ne számíts semmi nagy, elég értő webmesterek, akik mindezt korántsem újdonság.
Továbbra is beszélni az elrendezés. Az index.html fájlt, akkor megkérdezzük magunkat DIV-konténerek, amely épít a keretet, és style.css fájlt - leírja a pozícióját és a megjelenés a DIV-tartályba. Ez dióhéjban, és ez lesz, sőt, látni fogja egy kicsit később.
A tény az, hogy az igazi otthont a legtöbb szerver fut a UNIX-szerű operációs rendszer, amelyben a felső és kisbetűk eltérő (ellentétben, mint a Windows, munka, amit használnak).
Elkezdjük elő helyszínrajzokat 2 oszlopok divah
Mint már említettem, hogy kezdődik, igyekszünk létrehozni egy két hasábos elrendezés, amely sematikusan az alábbiak szerint:
Minden elem fér el egy nagy Div-tartályba, úgyhogy meg lehet változtatni a méretét és elhelyezkedését az egész elrendezés tulajdonságain keresztül a tartályba. Bent a fő Div konténerek lesz felelős a kialakulását különböző blokkok (sapkák, bal oldali oszlopban, a terület tartalmi lábléc).
Arra kérjük őket, hogy konfigurálja a méret és a pozicionálás CSS oldalon. Vágjunk bele.
Miért ugyanabban a mappában? Mert ha nem kell írni a fájl elérési útvonalát (csak adja meg a nevét), a böngésző fog keresni abban a könyvtárban, ahol a végrehajtható most (esetünkben ez Index.html). Ie semmilyen módon nem felel meg, mintha én meg az utat, hogy style.css, mint:
Ebben az összefüggésben szeretném megjegyezni, hogy még csak nem is zavarja a tárhely vagy helyi szerverre. Egyszerűen hozzon létre a számítógépen egy tetszőleges mappába, és tegyük a Index.html és style.css. Előírni az első közülük az utat style.css fájlt a következő formában:
Ez minden. Most meg tudja nyitni a Index.html (dupla kattintással rajta) a böngésző, kijelölt alapértelmezett fájlok megnyitását a HTML a számítógépen, és ez automatikusan letölti style.css.
Ez a módszer akkor hasznos, a tanulási szakaszban, de mégis, minden, amit meséltem dolgozik valós ellenséges vagy helyi szerver, akkor is, biztos, hogy jól jön később. És most a munka egy mappát a számítógépen lehet, még sokkal kényelmesebb, mint a tárhely. Bár, mint bárki más.
Előírja a kívánt sor blokkok index.html
Most létre kell hoznia négy DIV konténer minden részére, hogy a 2-oszlop elrendezés (fejléc, bal oldali oszlop a mező tartalmát, lábléc), és tegye őket egy nagy Div.
Div belső részei konténerek elrendezés lehet kötni, az egyértelműség kedvéért, a nevét ezeket a blokkokat. Mindez fogjuk írni a nyitó és záró HTML body címke. Get kódot, mint ez a Index.html:
Ie közvetlenül a nyitó címke Body már regisztrált a nyitó címke fő Div elrendezés tartály:
Ahol az előre meghatározott azonosító (ebben az esetben id = "maket"). Később e ID (további információ CSS választók tag, egy osztály (class), Id és az univerzális választó), fájlban style.css lépcsőzetes stílusok, mi kell hozzá CSS tulajdonságokat, hogy segítsen meghatározni a méretét és elhelyezkedését a fő Div.
A megnyitó után a fő Div már regisztrált négy konténer kód, melyik lesz az elrendezés elemei.
Mind a négy Div általunk kijelölt egyéni azonosító, amely aztán style.css írunk CSS tulajdonságokkal, amelyek segítenek beállítani a méretét és relatív helyzete (pozicionálás) a tartályok. Az érthetőség kedvéért, amelyben Rendeltem rendeltetési helyükre. Ja, és a záró Body tesszük a záró címke fő Div egy egész elrendezés:
Most, ha hoztunk létre nyitott Index.html a böngészőben, látni fogjuk, csak egy névsort oszlopba Parts 2 oszlop elrendezés. Ha megnyitja a Index.html a böngésző FireFox plugin telepítve a Web Developer és válasszon a menüpontok a plugin „kontúrok” - „Contour blokk szintű elemek”, akkor valami ilyesmit fog látni a következő kép:
Ie minden kiderült, pontosan úgy akartunk - négy Div zárt egy fő tartályba. De akkor miért úgy néz ki, nem olyan, mint már vázolt elrendezés tömbvázlata alapján az elrendezés a blokk? Csak nem írt semmit a mi style.css, amely varázslatosan (CSS használatával tulajdonságok), hogy mindent a helyére díva.
Előírja a CSS tulajdonságokat blokkok
Akkor valószínűleg hallott vagy látott, hogy van egy fix szélességű elrendezést (pl 800px), és lehet, vagy, gumi - szélessége alkalmazkodik a képernyő felbontása a látogató.
A második lehetőség (gumi) gyakran használják a fórumokon, és egy fix szélességű elrendezéssel leggyakrabban használt weboldalak. Ez különösen igaz most, az Advent a szélesvásznú monitorok, nagy felbontású képernyő (gumi fogja nézni ezt a monitor nem túl jó).
Ezért írja elő a mi fő Div száma CSS tulajdonság style.css, amely létrehoz egy fix szélességű elrendezéssel (például 800px), és igazítsa azt vonatkoztatva középen a képernyő szélein (az index.html a fő tartály már regisztrált azonosítóval, úgynevezett maket):
Nos, nézzük megtörni ezt a rekordot. Valószínűleg már tudta, hogy #MAKET (ezt nevezik a választó) azt mondta, hogy a rekordot a CSS fájl csak azokra az Div, amely be van jegyezve ID = „Maket”. A merevítők kerülnek rögzítésre CSS tulajdonságokat az értéküket. Az általános szintaxis a CSS fájlban rekord szerkezete a következő:
Figyelemre méltó, hogy a CSS kód működni fog egyformán jól, függetlenül attól, hogy a kis- és nagybetűs, hozzátéve, vagy nem hozzá elemeket közötti sornyi kódot migráció szóközt vagy tab - írja általános módon lesz sokkal kényelmesebb.
De ez az, amit tervez elmondani részletesen egy cikksorozatot szentelt a munkát a stílus az új webmesterek. Nézzük az egyes ingatlanok külön-külön.
Az első két oszlop elrendezés CSS tulajdonság:
Ez lehetővé teszi, hogy összehangolja a fő Div közepén a bal és jobb szélét a képernyőn. Margin tulajdonság maga célja behúzni a tartályt a külső határokon a szomszédos elem az oldal.
A mi esetünkben a fő Div (blokk) a legkülső eleme két oszlop elrendezés, így Margó állítja a francia a határait a felhasználó böngészőjének képernyőjén határait.
Az első érték, előírt a Margó, nulla - ez azt jelenti, hogy a fő Div (valójában elrendezés önmagában) fogják nyomni a felső és alsó széle a képernyő (felső és alsó margó nullával egyenlő).
A második érték a Margó van bejegyezve, mint az Auto - ez azt jelenti, hogy a bemélyedés a jobb és bal határait a fő tartály egyenletesen oszlik el, azzal az eredménnyel, hogy ő (és valójában elrendezés is) fogják képest középre a bal és jobb szélét a képernyőn. Ilyenek a pitét.
Két sornyi CSS kód, és hogyan kell írni a szöveget a részletes magyarázatot, jelentőségük (rémálom).
Sorolja az ingatlan adatait a style.css
A módosítások mentéséhez és nyissa meg a index.html a böngészőben. Látni fogja, hogy ez most a szélessége a két hasábos elrendezés már nem egyenlő a szélessége a képernyő, és csökkenteni 800px. Ugyanakkor ő is elhangzott a középpontban:
Igazítsa meg a két hasábos elrendezés közepén
Ő ezt nem érti, így őt személyesen (Internet Explorer 5) hozzá kell adni Body az alábbi CSS tulajdonság:
Ezért kell egy új tulajdonság a legfontosabb Div, amely meghatározza a szöveg igazítását körül az elrendezés a bal oldalon (ez az alapértelmezett érték, hanem azért, mert van előírva, különben meg kell adnia a balra igazított kimondottan):
Ilyen a csel fülek, a jogot, hogy módosítsa a régebbi böngészők. Írjuk be a style.css majd kinéznie:
Legfontosabb blokkok egyértelműség
Most javaslatot tenni a belső elrendezés blokkokat. A jobb áttekinthetőség érdekében azt javasoljuk, hogy finomítja a Div különböző színekben, ha a háttér színét számukra, segítségével speciálisan erre a célra (a tulajdonságait CSS - háttér színét.
Tehát írnak elő az összes nevet a belső ID Div background-color tulajdonság különböző értékeinek a háttér színét, például:
Ennek eredményeként a két hasábos elrendezés alapján az elrendezés a blokk fog kinézni kb így:
Most, hogy lássuk a határokat az egyes tartályok, akkor nem kell igénybe a plugin Web Developer (loc. Cit).
Fejléc blokk szerinti tömbvázlata látható korábban ebben a cikkben, akkor ki kell töltenie teljes szélességében az elrendezés, de a blokk bal kell egy korlátozott szélességű. Ennek beállításához használhatja a már ismert CSS tulajdonságok szélesség, például:
Ennek eredményeként a layout válik:
Definiálása körüli áramlás a bal hangszóró egység más egységek Float
Nos, ez már sokkal közelebb a blokk diagram két hasábos elrendezés az oldalon, de ez még mindig nem egészen igaz. Arra is szükség van, hogy tartalma blokkot nem alatt található, és a jobb a bal blokk.
Ennek elérése érdekében a nem bonyolult, van javára CSS tulajdonság úgynevezett úszó. amely lehetővé teszi, hogy nyomjon meg egy blokk szintű elemet a jobb oldalon a képernyő, és állítsa be, hogy lezárja a másik viszont található mögötte (HTML) elemeket.
Bit nem világos? Sebaj, most gondoljunk minden. Add a tulajdon bal blokk, amely lehetővé teszi, hogy nyomja meg a bal szélén a csomagolást, és állítsa be a jobb oldalon lévő tartályban alatt a kódot. Úgy fog kinézni:
Ie Hozzátette csupán egyetlen úszó telken Bal érték szánt Bal blokk. Minden kódot style.css, általunk készített abban a pillanatban, a következő lesz:
És mi elrendezése Div elrendezés most így néz ki:
Osztály! Majdnem, amit akar, de aztán megint van egy kis bökkenő. Lábjegyzet (pince) blokk ne körbe a bal oldali oszlopban a jobb oldalon, meg kell alján az elrendezés és elfoglalják a teljes szélességben.
Sok szerencsét! Hamarosan találkozunk a blogoldalakon KtoNaNovenkogo.ru
Ez az árnyalatok és finomságok SEO honlap optimalizálás.
A fejlődési szakaszban van, hogyan érti, hogy szükség.
Csakúgy, mint a webhely használata, nem tudom.
A helyszínen egy blogot ez a terv alkalmas.
Sok szöveget. Akkor kibír átszerkeszthesse bármely helyen.
A lényeg, hogy lenne értelme, vagy a szó a cikkben, mint az átfedés a már korábban írt. Ennélfogva, hézagosságából.
De ez egy szükségszerűség.
egy fix szélességű. majd a szövegeket? 200 pixel széles, és a szó lesz (hosszú szó betűméret, stb) kezdődik rés minta, mint a nem? maga alá menni az 1024 felbontás (faerfoks) és sok (nagyon sok) blogok és weboldalak szentelt a csodálatos elrendezése és CSS olvadó ilyen zavart és ingadozás, nem világos, hogy az emberek megtanulják, cross-browser elrendezést.