Hogyan hozzunk létre egy diavetítést CSS és HTML, más szabadúszó blog
Hogyan hozzunk létre egy diavetítés a CSS és HTML
Mit fogunk csinálni
Létrehozunk egy egyszerű slideshow a négy fül a jobb és bal oldalon a fő kép. Ha rákattint az egyik fület a jobb oldalon az új kép jelenik meg. Nézze meg, hogyan fog kinézni a végén, ez itt lehetséges.
Készítsünk képeket
Elméletileg működik nagyon egyszerű. Fogjuk használni tag egy, mozogni egyik képről a másikra. Ez nagyon hasonló a link „fel”, ami görgeti az oldalt a felső, egy klikk. Az egyetlen különbség az, hogy a képeket gördül a tartályban div. helyett görgetés felfelé és lefelé az oldalt.
A HTML, önmagában nagyon egyszerű. Ami a fülek, ez csak egy felsorolás, képekkel belsejében címkéket. A megtekintett képeket zárt egy div (ez nagyon fontos, mert elrejti a felesleges képeket keresztül a túlfolyó. És csak akkor jelenik meg a kiválasztott kép). Ezen kívül minden képet is mellékelt egy div és a horgony tag. Ezek div s lehet használni, mint konténer, abban az esetben, a használni kívánt háttérképet, hanem a szokásos kép, tényleg nincs szükség ebben a példában, akkor csak hagyja őket, ha meggondolja magát.
Hogy ilyen legyen html:
CSS, akkor állítsa be a lapok, hogy azok úgy vannak elhelyezve, hogy a bal oldalon a fő ablak és helyezzük egymásra. Azt is megállapították, 40% átláthatóságot füleket a normális állapot, és 100% -prozrachnost egér fölötte van. Természetesen a legfontosabb része a CSS utal y div tartalmazó képet. Csak meg kell győződnie arról, hogy a túlfolyó tulajdonság értéke rejtett.
Hogy ilyen legyen a CSS:
Mindezt összerakva
Az utolsó dolog, amit meg kell tennie, hogy csatlakoztassa a HTML és CSS. Persze, meg lehet változtatni a kinézetét a diavetítés száma és a lapok. A legfontosabb dolog, amit meg kell emlékezni a jelen útmutató - az ötletet, hogy a horgony tag a kép kapcsoló eszköz.
Így a kód így néz ki, összeszerelve: