4 Módszer oszlopon igazítás sablon
Az egyik legnehezebb feladata, ha a CSS a telepítés azonos magasságban az oszlopokhoz. Vannak különböző módszerek, amelyek mindegyike saját pluses és hátrányával. Ebben a leckében megnézzük a négyen.
Mit jelent az, azonos magasságú oszlopokat?
Ez a hatás érhető el segítségével a CSS háttér, amely ugyanabban a magasságban van a hangszórók.
Ez meglehetősen régi trükk, amelyet széles körben használnak, hogy hozzon létre oszlopok azonos magasságú.
Ez abban áll, háttérképet használ megismételjük függőlegesen. Egy példa az ilyen kép az alábbiakban mutatjuk be (az adatok kissé növekedett).
Egy ilyen kép általában 1 px magasságú és szélessége megegyezik a szélessége a sablont.
A példa a következő jelölést:
A tartály lehet használni, mint egy body tag. A példa egy külön elem div bizonyítani megvalósíthatóságát alkalmazzuk a módszert, az oldal tartalmát.
CSS kód nagyon egyszerű. Shift az úszó egységek és #sidebar #content és bal meghatározott szélességének felel meg nekik. Állítsa be a margó #container tartályba.
A háttérben a tartály használjuk a kép faux-column.png (ez, a fent leírtak szerint). Szintén túlfolyó tulajdonság be van állítva, hogy: rejtett. Meg kell akadályozni, az összecsukható konténer.
A tartály mindig ugyanabban a magasságban, mint a legnagyobb oszlop. Háttérképet így fog kinézni, mintha a hangszórók azonos magasságban.
Ez a módszer a legjobb használt fix mintát, de eredményesen használható a legtöbb úszó mintákat.
Ön is használja a teljes körű vizuális eszközök háttérrel (árnyékok, határok, és így tovább). Ön is használja a kép több mint 1 px magas.
- Könnyen megvalósítható ..
- Úgy működik, függetlenül attól, hogy az oszlop magasságát.
- Ez megköveteli, hogy a képet, amely egy további HTTP kérést.
- Változások a minta változtatni kell a képeket.
Ez a módszer is használja a háttér beállítása a tartályba. Annak ellenére, hogy az eljárás pszeudo oszlop csak korlátozott mértékben használható, nagyon egyszerű, és jól működik.
A jelölő használt ugyanaz, mint az előző módszer:
CSS kódot is nagyon egyszerű. A példa a lebegő oszlopok szélessége, de azt is lehet használni rögzített értékeket.
Hoztunk háttérszínt az elemek és #content #sidebar. Ügyeljen arra, hogy a szín az adott oszlop, amely feltételezi, hogy a leghosszabb.
A fő különbség a módszer a hamis oszlopok használata a háttér színe a kép helyén. A működési elv ugyanaz - a tartályt a háttérben kifeszített magasságig több magas oszlopok, és egy képet, amely úgy tűnik, hogy az összes hangszóró azonos magasságban.
- Könnyen megvalósítható.
- Könnyen karbantartható.
- Nehéz végrehajtani az összeg több mint 2 oszlop.
- ismerete is szükséges, amely az oszlop hosszabb.
- Nem működik a sablonokat különböző oldalain ugyanabban az oszlopban a hosszabb is, ez rövidebb.
Ez a módszer a keret oszlopok és negatív árrés alkotnak az illúzió azonos magasságú oszlopokat.
HTML-kód nem más, mint a korábbi eljárások:
De a CSS kód sokkal érdekesebb. A tartálynak van egy fix szélességű és középre az oldalon. A -nak #sidebar elemek és #content érdekes következménye van:
Minden szín, hogy használják ezt a módszert vannak állítva #content elem tulajdonságait. Van rendelve egy háttérszínt és szélessége a keret beállítása megegyezik a szélessége az oldalsáv. Border Color használja az egyik, hogy állítólag sidebar háttérben.
Az első lépés, hogy kérje a megfelelő francia oldalsáv negatív érték megegyezik a szélességével. Tehát ő szorult vissza a képernyőre. A probléma most a rendelést overlay elemek egymás tetejére. #sidebar elem tetején található. Ahhoz, hogy visszatérjen a felső oldallap, állítsa be a helyzetben tulajdonság: relatív.
- Úgy működik, függetlenül attól, hogy melyik oszlop hosszabb.
- Egyszerűen telepíthető.
- Könnyen karbantartható.
- Oldallap kell egy fix érték szélességű, mint a border-width tulajdonság érzékeli csak az abszolút értékeket.
- A negatív értékek a bemélyedés nem látható régebbi verziói IE.
Ez a módszer sokkal nehezebb megérteni, mint mások.
A kiegészítő elem hozzá jelölést div.
CSS kód ez a módszer sokkal bonyolultabb, mint a fentiekben ismertetett módszerek összehangolás. Mindkét #sidebar #content elemeket és tulajdonságokat kapnak a bal shift és szélességét, valamint valami kiegészítő.
Először teszünk úszó oszlop és konténerek. A példában minden balra mozdult, de elmozdulás irányának nem játszik nagy szerepet.
Ezután állítsa a háttérben a két div konténerek. A belső tartálynak egy mintát oldallap, megjelenésében - a fő tartalomra mintát.
Ha most ellenőrizze, hogy megjelenik a böngészőben, akkor lesz látható, csak a háttérben a belső tartály, hiszen magasabb a felhalmozás az elemek sorrendjét.
Elhelyezése a belső tartály létrehozására annak tulajdonságait megfelelő értéket 75%, amely egyenlő a szélessége a fő tartalomra oszlopot.
Mi a viszonylagos elhelyezése és az érték a bal 75% shift minden rendben.
- A módszer működik, függetlenül attól, hogy az oszlopok szélessége
- A módszer működik minden sablonokat.
- Akkor generál az oszlopok számát.
- A módszer igen nehéz megérteni.
- Szükség van egy további elemet div.
következtetés
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!