Verseny a legjobb eredménye a héten! Írások Roldo napló css alapjai kezdőknek és haladóknak
Verseny a legjobb eredménye a héten!
Menüpontok (#side). Sőt, ez az összes kapcsolatot, de néhány tulajdonsága lehet rendelni az egyes elemek. A lista olyan tételek is gyűjti Tex. Zolotzzze =) és a többi, Beteszem itt teljes egészében külön-külön.
Tehát szinte minden elemét az oldal és osztályok találkoztunk, akkor most mindegyik a tulajdonságokat CSS.
Kísérlet - zárja el a blog egy ideig, és módosítsa a tulajdonságokat a különböző elemek és osztályok, majd mentse, hogy mi történik a végén. Szóval képzelni, hogy egy képet napló elrendezés több és megérteni, hogyan van jobb cselekedni szempontjából változások regisztráció.
7. Alapvető működési módszerek.
Ebben a fejezetben beszélünk azon technikákat, amelyek általánosan használt, hogy módosítsa a tervezés folyóirat CSS. Is figyelembe fő elveit dolgozó tervezési CSS segítségével.
A legfontosabb - szélesség, magasság, vastagság és egyéb kapcsolódó méreteit, a pixel, és miután minden értéket meg kell írni px, pl
#side
Ha meg kell adnia az értéket százalékban írunk%
A második - egy gyorstalpaló angol.
Top - top
Alsó - alsó
Bal - bal
Jobb - jobb.
Center - Center.
Harmadik - behúzás. Kétféle ingatlanok - margin és padding. Feltétlenül és olvassa el a részleteket itt - htmlbook.ru/css/margin.html htmlbook.ru/css/padding.html
Margó beállítja közötti térköz a szélén a szülő elem és a jelenlegi.
Padding - belső tér között, a szélén az aktuális elem és annak tartalmát.
A legtöbb probléma a hibás kijelző a közös az elemek elrendezése, hogy ezek a tárgyak kerülnek padding. Tegye margin: 0 és padding: 0. az ilyen problémák elkerülésére.
A jó kezdet lenne, hogy távolítsa el az összes padding a szervezetben, hogy nincs távolság a képernyő szélein és az elemek (test). Ezzel elkerülhető néhány következetlenséget a kijelzőn különböző böngészők! Majd akkor vissza árrés, ha szükség van rájuk.
Negyedik - fontosságát. Tag! Fontos azt mutatja, hogy az ingatlan nagy jelentősége van, és el kell végezni pontosan írta akkor a CSS. Írásbeli csak így és nem másképp - miután tulajdonságai a tér és fontos, és csak akkor pontosvesszővel !.
Minden, ami a címkét elolvasni htmlbook.ru/css/! Important.html
A második probléma a helymeghatározás. Ha valamit változtatni a blokkokat, lehetséges, hogy megtörjük a „big picture” az oldal kódját. De van egy megoldás -
Az ingatlan float: left; a #extrabottom azt mutatja, hogy az elem balra van igazítva, míg az egyéb elemek kell, hogy áramlás vegye körül a jobb oldalon. Bizonyos esetekben ez működik, próbálja meg felvenni a blokk tulajdonságait.
Az ingatlan világos: mindkettő. #extrabottom ellenkezőleg, megtiltja burkolóelem mindkét oldalon. Úgy működik, más esetekben. Általában, ha problémája van az ilyen típusú, próbálja ki ezeket a megoldásokat, és ha nem, akkor írd diarycss.diary.ru közösségi
O) dinamikusan változtatni a méret a blokkok, dinamikus design.
Rögzített szélességű nem mindig jó és érdekes, így CSS funkciók létrehozása objektumok, amelyek megváltoztatják tulajdonságaikat, ha változtatni a képernyő felbontását, vagy a méret az oldal.
Lesz protsentirovanie - nevezetesen, jelezve az egység szélessége (szélesség) százalékában. Ezt a leírást adott a szélessége a tárgy, illetve a többi elem az oldalon, és ha változtatni azok tulajdonságait, majd követi őket, és módosítsa az aktuális objektumot. Például,
#wrapper okozhat a főegység mindig 80% -át foglalják a képernyőn, és a # page-t mutatják, hogy a pályáról üzenetét fogja elfoglalni 90% -a blokk szélessége page-c (szülő). Természetesen hasonló hatást lehet elérni, és árrés, de a szélessége a szülő elem még mindig jobb, hogy kérje százalék.
A legjobb módja, hogy megszervezze a dinamikus dizájn a következő:
Expose szélessége #wrapper Százalék legkönnyebb 100% (a szélessége a képernyő).
A szélessége a blokk # page-c do százalékában, mert sokkal kényelmesebb, és az is, attól függően, hogy a szélessége wrappera, akkor is változhat, tekintettel a képernyő szélességét.
Ebben az esetben, mindig győződjön meg arról, hogy #side menü (attól függően, #wrapper) lakott ugyanabban az időben nem több, mint a maradék helyet, különben nem fog megjelenni, ahol akar. Akkor jelölje be ezt azáltal, hogy egy kisebb felbontású képernyőn, mint a 1024 * 768 és nézi az oldalt. Ilyen engedély több felhasználója van, így vezérlik elsősorban nekik.
Egy fix szélességű #side. Ahhoz, hogy a menü nem „hagyja”, szükség van a # page-c kimondta, például (1024 mínusz shirina_menyu) pixel. Több - lehetséges.
Mert #side menü ebben az esetben is jó segítség-line position: absolute; egyértelmű: left; - azokat abszolút pozicionált menü „-ből kód” és azt mutatják, hogy más elemeket kell körbe a menü jobb oldalán.
Ezen túlmenően, a helyzet a # page-c nincs átfedésben a menüpontot. Tartsa #side határ ugyanazon a szinten, mint a szélén a felvételi egység, vagy volt köztük levő távolság (lásd. A helymeghatározás és padding).
Az én-kód, A probléma megoldása a következő:
#side
# Oldal-c
Behúzása 150px segít content # page-c mindig a menün kívül a területen, emellett a menü is jelzi, hogy szükség van a kerületi jobbra.
Az is segít, min-width tulajdonság. Ez a tulajdonság jelzi a szélessége, ami kevesebb, mint az elem nem lehet, és előírja, hogy így: # page-c. Aztán csökkent a szélessége az oldalelemek nem lehet kevesebb, mint az előre meghatározott érték, a görgetősáv jelenik meg helyette. Van max-width. ahol olvasni róla, meg kell emlékezni.
8. Bonyolultabb és bonyolult tervezési technikák.
9. kiegészítések és ajánlások (Ajánlott Reading)
Ha további kérdése van.
Mielőtt kérje meg őket, ezt:
Kérjük keressen szövegét én útmutató (ctrl + F), írja be a szót, hogy érdekli, és nézd meg az összes információt, hogy lehet találni. Olvassa el figyelmesen.
Kérjük, használja a keresési közösség által diarycss.diary.ru. Írjon be néhány szót az érdeklődés, és mindent, amit tudni akarsz, meg fog jelenni a megtalált üzenetét.
Hidd el nekem - így megtalálja feltétlenül mindent egyszerre, és nem várja meg, amíg a válasz „megy ezen a linken.” Akkor jól meg ezt a linket.
Poke a közösségben tag érdekli, és megjeleníti az összes hozzászólás ebben a témában.
Ha még mindig nem működik, és a probléma merül fel, akkor kérdezni, hogy a közösség, így:
- naplót nyitva
- Írd le a kódot
- Világosan megmagyarázni, hogy mit szeretne látni.
Megpróbálom, hogy a tipikus kérdéseket ebben a kézikönyvben úgy, hogy frissítésre kerül.
Ready tervez.
Séta mások naplók - terveikben talál sok hasznos dolgot maguknak akvizíciók. Különösen javasoljuk, hogy nézd meg itt - diary-design.diary.ru
Itt látható a javasolt kialakítása a Tex - tex.diary.ru/p30948279.htm# kódot. Tipikus menü rögzített szélességű, szilárd megjelenést.
Itt van a teremtés - diary-design.diary.ru/p49766406.htm# kódot. Itt végre dinamikus szélesség és a háttér körül a hozzászólásokat, és a kombináció a háttérrel a különböző elemek egy egységes kollázs.
Őszintén remélem, hogy olvassa el ezt a kézikönyvet, és már legalább néhány hasznos információt. Köszönöm a figyelmet. Roldo.