CSS-pohjaisen sisällön harmonian luominen
Tämän päivän opetusohjelmassa opimme, miten voimme luoda a horisontaalinen ja pystysuora sisällön harmonia käyttämällä vain CSS3: ta. On olemassa monia jQuery-laajennuksia, jotka voivat tehdä tämän työn puolestasi, mutta mitä teet, jos kävijällä on Javascript pois päältä, sitten harmonikka ei toimi oikein. Jos harmonikka on pelkästään CSS: ssä, se toimii kaikille kävijöillesi.
Aiomme luoda a vaakasuora ja pystysuora sisällön harmonikka. Kun napsautat otsikon tekstiä, dia avautuu, kun koko sisältö näkyy, ja tässä on nopea esikatselu (kuvakaappauksia) siitä, miten ne näyttävät.
Kuten mitä näet? Anna koodauksen alkua!
1. HTML: n ja sisällön valmistelu
Aluksi aiomme luoda harmonian HTML-koodin.
Rakenne tarvitsee säiliön div ja sitten on jakso jokaiselle liukukannelle harmonikassa. Tässä esimerkissä on 5 dioja. Jokaisella dioja on otsikko ja kappale sisältöä varten.
Meistä
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Alquam semper mauris sit amet justo nec lecinia magna molestie. Etiam istukko on dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Muualle luokittelematon alio, joka on vain ante, ei semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget paikoillaan, ei fringilla vel eros. Nam vehicula elementum nulla sed seuraa. Phasellus eu erat enim. Maine ei massa dapibus scelerisque eu loremissa.
Palvelut
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Alquam semper mauris sit amet justo nec lecinia magna molestie. Etiam istukko on dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Muualle luokittelematon alio, joka on vain ante, ei semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget paikoillaan, ei fringilla vel eros. Nam vehicula elementum nulla sed seuraa. Phasellus eu erat enim. Maine ei massa dapibus scelerisque eu loremissa.
blogi
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Alquam semper mauris sit amet justo nec lecinia magna molestie. Etiam istukko on dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Muualle luokittelematon alio, joka on vain ante, ei semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget paikoillaan, ei fringilla vel eros. Nam vehicula elementum nulla sed seuraa. Phasellus eu erat enim. Maine ei massa dapibus scelerisque eu loremissa.
salkku
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Alquam semper mauris sit amet justo nec lecinia magna molestie. Etiam istukko on dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Muualle luokittelematon alio, joka on vain ante, ei semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget paikoillaan, ei fringilla vel eros. Nam vehicula elementum nulla sed seuraa. Phasellus eu erat enim. Maine ei massa dapibus scelerisque eu loremissa.
Ottaa yhteyttä
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Alquam semper mauris sit amet justo nec lecinia magna molestie. Etiam istukko on dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Muualle luokittelematon alio, joka on vain ante, ei semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget paikoillaan, ei fringilla vel eros. Nam vehicula elementum nulla sed seuraa. Phasellus eu erat enim. Maine ei massa dapibus scelerisque eu loremissa.
Nyt meillä on dioja, joiden avulla voimme aloittaa harmonian tyylin.
2. CSS-muotoilu
Ensinnäkin meidän on tyyliltävä sisältävä div harmonikka. Tämä antaa meille käsityksen siitä, miten jokainen dio ja jokainen otsikko voidaan näyttää.
/ * Määritä akordion-ruutu * / .accordion leveys: 830px; ylivuoto piilotettu; marginaali: 10px auto; color: # 474747; tausta: # 414141; padding: 10px;
Seuraavaksi aiomme luoda otsikot kunkin dioja varten.
.harmonikkaosa float: vasen; ylivuoto piilotettu; color: # 333; osoitin: osoitin; tausta: # 333; margin: 3px; .akkososio: hover tausta: # 444;
Asetamme taustavärin olevan tummanharmaa osassa, jotta se olisi otsikko, jossa kävijät napsauttavat näyttää diaa. Käytämme tätä osaa sekä otsikkoon että sisältöön, mikä tarkoittaa sitä, että voimme käyttää vähemmän HTML-koodia ja käyttää uudelleen diaesityksen otsikkoa sisällön otsikkona.
.harmonikka-osa p näyttö: ei;
Tällä hetkellä kaikki diat suljetaan, joten meidän on varmistettava, että kappale on piilossa näkymästä, kunnes dia on auki..
.harmonikka-osa: sen jälkeen asema: suhteellinen; fontti-koko: 24 kuvapistettä; color: # 000; fontti-paino: lihavoitu; .akkososio: n-lapsi (1): jälkeen sisältö: '1'; .akkososio: n-lapsi (2): jälkeen sisältö: '2'; .akkososio: n-lapsi (3): sen jälkeen, kun sisältö: '3'; .akkososio: n-lapsi (4): sen jälkeen, kun sisältö: '4'; .akkososio: n-lapsi (5): sisältö: '5' jälkeen;
Suljettujen dioja käytettäessä haluamme näyttää numeron otsikon alareunassa, jotta voisimme sanoa, mikä numero on. Tätä varten käytämme CSS: ää lisäämään sisältöä osion otsikon jälkeen, tämä voidaan tehdä käyttämällä :jälkeen pseudo-luokan valitsin.
Nyt olemme luoneet dian otsikon, jonka avulla napsautustapahtuma voi näyttää liukukannen harmonikassa. On kuitenkin ongelma, CSS: llä ei ole napsautustapahtumaa, minkä vuoksi harmonikka luodaan tavallisesti käyttämällä jQueryä, jotta voimme liittää napsautustapahtuman otsikkotekstiin.
Meidän on jäljitettävä CSS: n napsautustapahtumaa, joka voidaan tehdä käyttämällä :kohde pseudo-luokan valitsin.
3. Käyttäminen :kohde pseudo-luokan valitsin
:kohde avulla voimme muotoilla fragmentin tunnuksen. Joskus käytämme sivun kiinnityskoodia osoittamaan sivun paikkaan. Napsauttamalla linkkiä id ankkuritunnisteesta tulee kohde ja voit muotoilla tämän käyttämällä :kohde valitsin.
Jos haluat lisätä tämän harmonikkaan, meidän on lisättävä linkki otsikon ympärille, joka osoittaa id diasta.
Meistä
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Alquam semper mauris sit amet justo nec lecinia magna molestie. Etiam istukko on dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Muualle luokittelematon alio, joka on vain ante, ei semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget paikoillaan, ei fringilla vel eros. Nam vehicula elementum nulla sed seuraa. Phasellus eu erat enim. Maine ei massa dapibus scelerisque eu loremissa.
.harmonikka-osa: tavoite tausta: #FFF; padding: 10px; .akkososio: kohde: hover background: #FFF; .akkososio: kohde h2 leveys: 100%; .akkososio: kohde h2 a väri: # 333; padding: 0; .akkososio: kohde p näyttö: lohko; .cordion-osa h2 a pehmuste: 8px 10px; display: block; fontti-koko: 16px; fontti-paino: normaali; väri: #eee; text-decoration: none;
Yllä oleva koodi muuttaa liukukappaleen kokoa sopii muuhun harmonikkaan ja muuttaa taustavärin valkoiseksi. Kohta piilotettiin niin, että kohde on näytettävä kappaleella.
Nyt kun napsautat harmonikan otsikkoa, dia muuttuu tyylin näyttämiseksi diaesityksen sisällöstä.
4. Vaakasuora harmonia
Yllä oleva koodi luo nyt yleisen harmonian, jolloin voimme aloittaa CSS-muutosten tekemisen horisontaalisen ja vertikaalisen harmonikan välisten erojen vuoksi. Molemmilla harmonikoilla on samat toiminnot, mutta otsikkomuotoilu olisi erilainen.
.vaakasuora osa leveys: 5%; korkeus: 250 kuvapistettä; -moz-siirtyminen: leveys 0.2s help-out; -webkit-siirtymä: leveys 0.2s help-out; -o-siirtyminen: leveys 0.2s help-out; siirtyminen: leveys 0.2s help-out;
Ensin asetimme leveys otsikossa on 5%, joten se on suljettu dia. Koska osio on sekä otsikon että sisällön sisältö, meidän on lisättävä animaatio, jotta sisältö voidaan näyttää siirtymisominaisuuden avulla.
/ * Aseta liukukappaleen numero * / .horizontal-osaan: sen jälkeen, kun top: 140px; vasen: 15px;
Luvussa olevan numeron sijainti on sama paikka kussakin suljetussa otsikossa, jotka on sijoitettu eri tavoin kuin pystysuuntaiset otsikot.
/ * Suljetun dia * / .horizontal-osan h2 -webkit-transform: rotate (90deg) otsikko; -moz-muunnos: pyöritä (90deg); -o-transform: kiertää (90deg); muunnos: kiertää (90deg); leveys: 240px; kanta: suhteellinen; vasen: -100px; top: 85px; / * Hiirellä avoimen dia * / .horizontal: target leveys: 73%; korkeus: 230px; .horizontal: target h2 top: 0px; vasen: 0; -webkit-muunnos: kierrä (0deg); -moz-muunnos: kierrä (0deg); -o-transform: kiertää (0deg); muunnos: kiertää (0deg);
Yllä oleva koodi muuttaa liukukappaleen kokoa sopivaksi muuhun harmonikkaan. Otsikko pyöritettiin pystysuunnassa, jotta se menisi alas otsikossa, mutta nyt, kun dia on auki, meidän on muutettava teksti takaisin vaakasuoraksi kääntämällä tekstiä takaisin 0 asteeseen.
5. Pystysuuntainen harmonia
Vertikaalinen harmonikka toimii samalla tavalla kuin horisontaalinen harmonikka, paitsi meidän on muutettava korkeus sijaan leveys ja meidän ei tarvitse muuttaa tekstin kohdistusta.
.pystysuora osa leveys: 100%; korkeus: 40px; -webkit-siirtyminen: korkeus 0.2s help-out; -moz-siirtyminen: korkeus 0.2s help-out; -o-siirtymä: korkeus 0.2s helpottaa; siirtymä: korkeus 0.2s helpotus; / * Dian korkeuden asettaminen * / .vertical: target height: 250px; leveys: 97%;
On kohde vertikaalisen harmonian tapauksessa muutamme korkeus otsikon näkyviin dia.
.pystysuora osa h2 sijainti: suhteellinen; vasen: 0; top: -15px; / * Aseta numero diaan * / .vertical-osaan: sen jälkeen, kun top: -60px; vasen: 810px; .optinen osa: kohde: jälkeen vasen: -9999px;
Edellä mainittu muuttaa asento otsikkoteksti suljetussa diasta. Suljetun dian kanssa täytyy asettaa asento numeron, joka sijaitsee harmonikan oikealla puolella. Kun dia on auki, meidän täytyy piilottaa tämä numero otsikossa, kun kohde on asetettu, joten muutamme vasemman sijainnin pois näytöstä.
Nyt kun napsautat harmonikan otsikkoa, dia muuttuu tyylin näyttämiseksi diaesityksen sisällöstä.
Toimittajan huomautus: Tämä viesti on kirjoittanut Paul Underwood varten Hongkiat.com. Paul on PHP Web Developer kehittäjä Bristolista, Yhdistyneestä kuningaskunnasta. Hän kirjoittaa opetusohjelmia Web-kehityksestä: pääaiheina ovat PHP, jQuery, CSS3 ja HTML5. Hän tallentaa myös hyödyllisiä koodinpätkiä osoitteessa Paulund.co.uk.
