Alapjai napló css kezdőknek és haladóknak
6. design elemek naplót.
.bal - amikor a menü bal oldalán a poszt
.jobb - jobb menüben.
.journal_list
.block_design - ha a blokk kialakítása.
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
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 elemeket. 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 - leírására használják linkeket. : Hover - azt jelzi, hogy leírja a pillanatot, amikor az egér kurzor egy elem.
Hogyan készítsünk egy elem láthatatlan? Segítség «display: none» tulajdon. Ezzel a tervezési eltávolítja az elemet a dokumentumban, így a hely nem fenntartott meg, emlékszik rá.
ingatlan kijelző is támogatja más értékeket, mint a blokk - gyakran használják a kódot naplók. Olvassa el, hogyan kell használni itt - htmlbook.ru/css/display.html és vegye figyelembe a támogatott böngészők.
Háttér. Háttér lehet használni olyan egység, ez hogyan történik:
A kép a háttér vesszük csak a saját könyvtár. Töltse le a képen van, de ne felejtsük - a „tömeg” kilobájt - a legfontosabb, hogy a használhatóság a napló. A kisebb súly, annál jobb az olvasó, így próbálja, hogy a több kilobyte képeit a minimum.
Ha van Photoshop, akkor meg kell, és ImageReady - csomag csak még tervezték, hogy optimalizálja a képeket. Nyitva a képet a Photoshop, jelölje ki az elemet, hanem a „Mentés másként”, válassza a „Mentés Network» ( »Save for web«) található, közvetlenül utána. Ez megnyit egy ablakot, ahol beállíthatja a paramétereket a optimalizált képet. Van néhány szabványos beállításokat (Preset), került kiválasztásra, hogy optimalizálja paraméterek, mint a GIF egy másik színek számát vagy JPEG három tulajdonsággal. A legalacsonyabb minőség a legkisebb méretű, segít, hogy az előnézet a optimalizált képet, amely szerint te magad is beállíthatja a minőség csúszkát ahogy kell. És alatta a kép mérete az optimalizált formában (kilobájt), amely automatikusan megváltozik, ha megváltoztatja a minőség - néz rájuk. Mondjuk - a képet jpeg 1000h200 mérete az átlagos osak 50 kilobájt - folytassa ezt a számot. Ha nem elég, és ez nem egy fotó, majd állítsa be a tömörítés típusa GIF különböző színárnyalat, ez nem csökkenti a kép a kép színeit. Nagyon kis képek is jobban csinálni a gif.
Ha nincs Photoshop egyáltalán, akkor töltse le a képet optimalizáló Ashampoo Photo Optimizer. Megértsék, hogyan működik, és csökkenti a képek benne.
Program a munka értékelését letölthető itt:
rapidshare.com/files/72805523/Ashampoo.Photo.Op.
A jelszó az archívum - netzor.org
Tehát, térjünk vissza a juhok:
Képeket feltölteni a könyvtárba, akkor megjelenik egy linket, hogy - URL. Link másolása és használja az alábbi kódot:
A design fix szélességű a központban, balra és jobbra.
Ez - a standard bőr napló, amit sok ember használja, és ami kényelmes és jó. Itt Tex minden részletesen - tex.diary.ru/p41771510.htm
Ne feledkezzünk meg a különböző képernyőfelbontás felhasználók számára - ha teszik az egységek nagyon keskeny, az emberek széles képernyős TV fogják elfoglalni 30% -a az oldalon, és a meg nem túl jó.
Kép a tetején és alján a képernyőn. Ez a módszer jellemző és alkalmas fix szélességű kialakítás, leírt az utolsó bekezdés. Egyszerű - be kell állítani a szélességét és magasságát #extratop és #extrabottom és tegye a képeket a háttérben. A rögzített szélességű a design tárgy adott ugyanaz, mint a szélessége a blokk átalakító, nem több. A magasság az a kép magasságát, a kép maga kell igazítani a szélessége a fő egységet.
Itt egy példa:
Ha #extrabottom hibásan jelenik meg. Két fő probléma van a kép: közte és az egység bejegyzések helyet, és ez jelenik meg rögtön a menü vagy után #extratop.
Az első probléma a tulajdonságait az osztályok rekordok egységet. Nevezetesen - behúzott őket. Távolítsuk bemélyedés a margin és padding:
- távolítsa el az alsó margó az osztály leírás mezőben üzenetét és menü.
Ugyanez lehet felírni a # page-c.
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
Dinamikusan változó a blokkok méretét, 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ő:
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 azt mutatja, amelynek szélessége kisebb, mint az elem nem lehet, és ez így ír. 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.
Ennek egyik eleme a másikkal szemben. Tudod, hogy az egyik eleme volt, mintha közelebb a felhasználó, mint a többi, és ha az elemek egymáson vannak egymásra a helyzet, ez az elem lesz, mint a „fent”.
Használt z-index. Minden nagyon részletes ide - htmlbook.ru/css/z-index.html
Változás stílus vízszintes csíkok és az oszlopok között. Itt beszélni - diarycss.diary.ru/p23118546.htm
Ha azt szeretnénk, hogy adjon meg egy rögzített elem méretű, de a tartalmát nem „beleavatkozik” ebben a méretben. Használhatja a görgetősáv - diarycss.diary.ru/p41016364.htm#
További információk a túlfolyó itt - htmlbook.ru/css/overflow.html
Ha még nem alakított ki, hogyan kell eltávolítani bizonyos elemei (mint írtam), akkor diarycss.diary.ru/p25244058.htm
A menü, mint a Tex. Ha tetszik ez a fajta menü, amiben az idő felesleges kapcsolatokat, akkor megbeszéltük itt - diarycss.diary.ru/p40633222.htm
Ha kapcsolatokat kell elhelyezni egy sorban. és tartósan jelenik meg két vagy több, akkor kérje meg a width tulajdonság! Ez lehetővé teszi majd a szélessége nem függ a szélessége a szülő objektum.
Ő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.