CSS-harmonikkaa käytetään laajalti laajennettavissa ja kokoontaitettavissa valikoissa, katkelmissa, kuvissa, videoissa, usein kysytyissä kysymyksissä, luetteloissa ja artikkelikatkelmissa. Voit luoda ne helposti HTML: n, CSS: n ja JavaScriptin (tai jQueryn) avulla. Vain CSS-harmonikan luominen on hieman haastava tehtävä, mutta se on erittäin hyödyllinen JavaScript-käytössä olevissa ympäristöissä.

Tässä oppaassa opit vaiheittaisen lähestymistavan pelkän CSS-harmonikan luomiseen.

Harmonikan perustaminen pelkällä HTML-koodilla

Jos prioriteettinasi on luoda esteetön haitari HTML: n avulla, ja tagit ovat oikea tapa. Sillä ei ole väliä mitä ohjelmointikieltä käytät, HTML-harmonika pysyy ennallaan. Luo merkitse vanhemmiksi ja kirjoita kysymys kohtaan a tag. Kirjoita kuvaava vastaus kohtaan a tag. Toista prosessi useille usein kysytyille kysymyksille.

FAQ 1



Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione adipisci illum error, hic expedita numquam impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!









instagram viewer



FAQ 2



Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate in accusantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque voluptates consequatur. 






FAQ 3



Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae ratione rerum vitae ab modi, miinus placeat quis dignissimos. Dolorem quaerat odit, iusto laboriosam possimus, in architecto aliquam commodi sapiente saepe sequi at eligendi hic reprehenderit repellendus quos!

Harmonikan muotoilu

Voit muotoilla harmonikkaa säätämällä taustaväri, raja-säde, marginaali, pehmuste, jne.

body {
 kirjasinperhe: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneve, Verdana, sans-serif;
 suurin leveys: 30 rem;
 marginaali: 1.5rem auto;
}
yhteenveto {
 fontin paino: 600;
 väri: rgb (255, 255, 255);
 taustaväri: rgb (7, 185, 255);
 pehmuste: 1,2 rem;
 marginaali-ala: 1.2rem;
 reunan säde: 0.5rem;
 kohdistin: osoitin;
}

Lähtö:

Ainoa rajoitus on, että et voi hallita jokaista koodin osaa. HTML-rakennetta voidaan muokata, mutta et voi luoda mukautettua harmonikkaa. Rakennetaan siksi mukautettu UKK-osio kehittynyttä CSS: ää käyttäen.

Luo mukautettu UKK-osio

On olemassa kaksi suosittua tapaa luoda mukautettu vain CSS-harmonika. Voit käyttää joko valintaruutuja tai valintapainikkeita; selitämme molemmat menetelmät.

Valintaruutumenetelmän käyttäminen

Valintaruutumenetelmä käyttää valintaruutu syöttötyyppinä. Aina kun käyttäjä valitsee välilehden, hän merkitsee valintaruudun ja se avautuu. Voit avata useita välilehtiä samanaikaisesti valintaruutumenetelmällä, samalla tavalla kuin voit merkitä useamman kuin yhden valintaruudun HTML-lomake.

HTML

Vain mukautettu CSS-harmonika (FAQ)

Käyttämällä valintaruutumenetelmää






Kuinka rakentaa mukautettu harmonikka käyttämällä vain CSS: ää?


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipit
 oletus, nesciunt eum nobis eaque, exercitationem differentio alias ullam quia. Corrupti beatae
 necessitatibus nihil.









Kuinka muuttaa pseudoelementtien korkeutta?


 Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatibus
 ducimus extrauri doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero incidunt
 reprehenderit facere ex hic ipsa odit in! Eveniet.

Yleinen CSS

Käytä perus-CSS: ää vartaloon.

body {
 väri: #502c2c;
 tausta: #f1edec;
 pehmuste: 1,2 rem;
 kirjasinperhe: 'Segoe UI', Tahoma, Geneve, Verdana, sans-serif;
 suurin leveys: 45 rem;
 marginaali: 0 auto;
 kirjasinkoko: 1.2rem;
}

Harmonikan muotoilu

Piilota ensin valintaruudut muokkaamalla syötettä.

/* Valintaruutujen tai valintanapin piilottaminen*/
input {
 sijainti: absoluuttinen;
 opasiteetti: 0;
 z-indeksi: -1;
}

Suunnittele nyt harmonikka. Voit lisätä::jälkeen pseudoelementti + merkki. Voit viitata a Merkkikokonaisuuden viitekaavio ja käytä mitä tahansa Entiteettimuunnoslaskin löytääksesi numeerisen arvon CSS-arvon. Tässä CSS-arvo + On \002B.

/* Harmonikkatyylit */
.faq {
 väri: #ffe3e3;
 marginaali-ala: 3rem;
}
.faq-label {
 fontin koko: 1,5 rem;
 näyttö: flex;
 kohdista kohteet: keskellä;
 perustella-sisältö: välilyönti;
 pehmuste: 1em;
 tausta: #b61818;
 fontin paino: lihavoitu;
 kohdistin: osoitin;
 käyttäjävalinta: ei mitään;
}
.faq-label:: jälkeen {
 sisältö: '\002B';
 pehmuste: 0,51 rem;
 muunnos: asteikko (1.8);
 tekstin tasaus: keskellä;
 siirtymä: kaikki 0,35 s;
}
.faq-content {
 maksimikorkeus: 0;
 pehmuste: 0 1em;
 väri: #2c3e50;
 tausta: valkoinen;
 siirtymä: kaikki 0,35 s;
 näyttö: ei mitään;
}

Lisätään nyt haitariin toimintoja käyttämällä vierekkäisten ja määritteiden valitsimia. Tässä, \2013 on CSS-arvo –, Numeerinen Arvo edustaa –.

input: checked + .faq-label {
 tausta: #8f1414;
}
input: checked + .faq-label:: after {
 sisältö: \2013;
 muunnos: asteikko (1,5);
}
input: tarkistettu ~ .faq-content {
 maksimikorkeus: 100vh;
 pehmuste: 1em;
 näyttö: lohko;
 siirtymä: kaikki 0,35 s;
}

Lähtö:

Radiopainikemenetelmän käyttäminen

Radiopainikemenetelmän syöttötyyppi on asetettu arvoon radio. Aina kun käyttäjä napsauttaa välilehteä, sitä vastaava piilotettu valintanappi avautuu. Kun napsautat seuraavaa välilehteä, edellinen välilehti sulkeutuu välittömästi. Voit avata vain yhden välilehden kerrallaan käyttämällä valintanappimenetelmää.

HTML

Vain mukautettu CSS-harmonika (FAQ)

Radiopainike-menetelmällä






Kuinka luoda harmonikka radiopainikemenetelmällä?


 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maiores quisquam atque dicta eum numquam necessitatibus, nisi non adipisci temporibus corrupti libero hic aspernatur quibusdam dolores perferendis, officiis odio repellendus.









Kuinka luoda mukautettu harmonikka käyttämällä vain CSS: ää?


 Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur possimus reiciendis vitae ducimus labore quidem velit vel temporibus! Illo sunt placeat officiis, tiure magnam. Ad sit perferendis ducimus dicta, est aspernatur asperiores, quasi beatae quos deleniti.









Mitä harmonikkatyyli tarkoittaa?


 Laudantium quibusdam laboriosam hic omnis quas ullam commodi rem. Architecto ut laborum eaque cum porro doloremque hic cupiditate tempora temporibus ducimus dolores magnam quidem, facilis sapiente officiis voluptas? No ei!









Sulje kaikki ×

CSS

Kopioi yllä oleva valintaruutumenetelmän CSS, koska molemmat menetelmät eroavat vain rakenteellisesta näkökulmasta. Saatat huomata, että yksi välilehti on avoinna koko ajan. Tämä johtuu siitä, että et voi poistaa valintanappien, kuten valintaruutujen, merkintöjä. Suorita tämä lisäämällä alla oleva CSS-koodi "Sulje kaikki" -valintanappulaan ilman kuvausta.

/* Suljetaan kaikki */
.faq-label {
 asema: suhteellinen;
}
.faq-close {
 näyttö: inline-block;
 pehmuste: 1 rem;
 fontin koko: 1 rem;
 tausta: #b61818;
 kohdistin: osoitin;
 sijainti: absoluuttinen;
 vasen: 64rem;
}

Lähtö:

Jatka kokeilua ja lisää animaatioita

Harmonikan takana on yksinkertainen logiikka: kun napsautat valikkoa, sen piilotettu sisältö tulee näkyviin. Koska tiedät nyt kuinka luoda harmonikka, on korkea aika toteuttaa ja kokeilla oppimistasi. Voit rakentaa vaakasuuntaisia ​​haitareita parantaaksesi suunnittelua, varsinkin kun näytät kuvia. Kokeile koodia säätämällä siirtymätehostetta käyttämällä avainkehysanimaatioita.

Naincy Mourya (16 artikkelia julkaistu)

Naincy on erikoistunut erittäin responsiivisten verkkosivustojen ja tehokkaan sisältöstrategian sekä verkkokopioiden rakentamiseen. Hän on freelance-tekniikan kirjoittaja, joka pitää silmällä trendikkäitä teknologioita.

Lisää Naincy Mouryalta