pre oldal teher hatása
Lecke, hogy hozzon létre egy előre betölteni az oldalt azzal a következménnyel Fontface Ninja honlapján. Fogjuk használni CSS-animációk, 3D transzformációk és SVG.
Természetesen tettünk és átalakítását az ebben az értelemben többek között a létesítmény a második demo, ami kissé eltérő hatásokat. Logó és preload indikátor egy oldalon fogjuk használni a beépített SVG, átalakítására ösvényt CSS. Készítsen egy kis script az SVG elem boot animáció, ellenőrzik az oldalt animációs osztály, amely növeli az alapvető tartályba.
Felhívjuk figyelmét, hogy fel fogjuk használni a CSS animációt és CSS 3D transzformáció, így fog működni, csak a böngészők támogatják őket.
Tegyük a blokk fejléc és a fő tartalmat egy külön edényben. Emlékezzünk vissza, hogy azt akarjuk irányítani mindent, ami történik az eredeti nézetre és tartalmat osztályok. Ehhez szükségünk lesz a fő tartályba. Nézzük meg azt az egyenlő class és id ip-tartályba.
Először megjelenik a fejlécben a logó és preload elem: mindketten SVG elemek azonban elosztjuk a kódot. Mint látható, mi üzembe a szélesség és magasság attribútumokat, és viewBox preserveAspectRatio. PresevreAspectRatio érték xMidYMin találkozik. Ez azt jelenti, hogy tudjuk alkalmazni a skála, ahol a menetrend, hogy illeszkedjen a saját tároló, míg a központban található, az X tengelyen, hogy a logó hozzáférhetővé a fogyatékos emberek, adjunk hozzá egy címet, leírást, és minden szükséges ARIA attribútumok, aria-labeledby.
Arra kérjük a fő tartályba IP-fő. majd alkalmazza az animációt annak gyermek, címek, fejezetek és a belső doboz:
Most Styling egészet.
Szeretnénk megjegyezni, hogy a CSS nem tartalmaz böngészőt előtagot, de megtalálható a teljes lista a forráskódot.
Kezdetben csatlakozni több mint egy font, ami szükséges a csere szöveg és ikonok a dobozban. Használt ikonok a demo veszik a Feather ikon készlet és létrehoztunk ikonochny betűkészletet Icomoon App. Betűtípus helyettesítő szöveg - Blokk. Nagyon hasznos létrehozása elrendezés.
Kezdetben határozza header 100% szélességét és magasságát, valamint tegye rögzített helyzetben:
Visszaállítja a külső padding fejléc h1:
Logó és töltse le az elem kerül elhelyezésre feltétlenül:
Mint ahogy azt ne felejtsük el, hogy a logó legyen adaptív. Pozícióját a képernyő közepén:
SVG, amelyet már hozzárendelve IP-belső. Ez jelenik meg, mint egy blokk elem, központosító vízszintesen, az auto értéke a külső oldalon padding:
SVG logo aktívnak kell lennie, de a mérete ne legyen túl nagy vagy kicsi. Mi a maximális és minimális szélessége:
Mivel a logó SVG, tudjuk testre a színe a tárgy útját:
Ugyanez vonatkozik a boot loader:
Á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!