harmonika css3
Használata csak a rejtett input elemek és címkék teszünk harmonika az animáció a folyamat záró / nyitó szakaszok tartalmát, kihasználva csak CSS.

Sok különböző változatai harmonika épült csak CSS. Többségük a pszeudo-osztály: a célt. A probléma ezzel az opcióval, hogy akkor valójában nem zárja be újra, vagy nyisson meg egy részén tartalom több partíciót egyszerre. Rejtett négyzeteket tudjuk irányítani nyitás és zárás. Alternatívaként használhatja a rádió gombok, ha azt akarjuk, hogy csak egy nyílt szakaszon egy időben.
Megjegyzés: Az eredmény kiváló minőségű leckét csak akkor működik a böngészők, amelyek támogatják a tulajdonságait CSS3.


HTML-kód
Felhívjuk figyelmét, hogy kérünk minden eleme a bemeneti azonosító, amellyel azután egy attribútum címkéket. Ez a művelet kell jelölni a jelölőnégyzetet, kattintson a címkén.
A szövegben a lecke előtagokat áttekinthetőség kedvéért, a böngésző gyártók. vannak jelen, ahol szükséges, a szövegben a demonstrációs kódot.
Szélességének megadása egy harmonika és a központ is:
Következő, hogy a címke néz ki, mint egy gombot, kérve a háttér színátmenet. Segítségével árnyékok keretet hozzon létre, és a hatás a belső bemélyedés. Is létrehozott z-index 20, hogy helyezze a részét a tetején az összes tartalmi elemek:
Ha az egér teszünk white label:
Ha megnyomja az egér gombját a tag, a jelölőnégyzet bejelölése után a megfelelő címkét kap style „elszigetelt”:
Ez használ cselszövő válassza ki a címkét, amely előtt a négyzetet a bemeneti elem.
Hozzá egy kis nyíl ikont, ha lebeg a kurzort. Ehhez egyszerűen használja a „after” pseudo-class érdekében lemondanak a felesleges jelölés:
A „jelölt” elem jelenik meg a felfelé mutató nyilat:
És eltávolítja az ikont egy zárt tétel:
Tartalmi terület eredeti magasságát 0px, és minden túlnyúló törlődik. Add az átalakulás a magassága és az árnyék. Átalakítás fog működni a „zárás” szélén. Mi határozza meg transzformáció a kiválasztott elem.
Határozza meg a stílus a tartalom:
Most határozzuk meg három osztály eltérő magasságú hogy az animáció nyit / zár példány:
Mint már említettük, a használata a magassága érték „auto” ebben az esetben lehetne jobb. De mivel mi az animáció, akkor szükség van egy bizonyos magasságot.
Egyes mobil böngészők kattintva a címke nem tartalmazhat jel megfelelő input elemek.

Á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!