CSS harmonike se pogosto uporabljajo za razširljive in zložljive menije, odrezke, slike, videoposnetke, pogosta vprašanja, sezname in odlomke člankov. Z lahkoto jih ustvarite z uporabo HTML, CSS in JavaScript (ali jQuery). Ustvarjanje harmonik samo za CSS je nekoliko zahtevna naloga, vendar je zelo koristna v okoljih, kjer je JavaScript onemogočen.

V tem priročniku se boste naučili postopnega pristopa k ustvarjanju harmonike samo za CSS.

Izdelava osnovne harmonike samo z uporabo HTML

Če je vaša prednostna naloga ustvarjanje dostopne harmonike z uporabo HTML, in oznake so prava pot. Ni pomembno, kateri programski jezik uporabljate, harmonika samo za HTML bo ostala nedotaknjena. Ustvariti označite kot starša in vnesite vprašanje v a oznaka. Napišite opisni odgovor v a oznaka. Ponovite postopek za poljubno število pogostih vprašanj.

Pogosta vprašanja 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



Pogosta vprašanja 2



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






Pogosta vprašanja 3



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

Oblikovanje harmonike

Harmoniko lahko oblikujete tako, da prilagodite Barva ozadja, obrobni polmer, marža, oblazinjenje, itd

telo {
 družina pisav: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Ženeva, Verdana, sans-serif;
 največja širina: 30rem;
 marža: 1,5 rem avto;
}
povzetek {
 teža pisave: 600;
 barva: rgb (255, 255, 255);
 barva ozadja: rgb (7, 185, 255);
 oblazinjenje: 1,2 rem;
 rob-dno: 1,2rem;
 obrobni polmer: 0,5 rem;
 kazalec: kazalec;
}

Izhod:

Edina omejitev je, da ne boste imeli nadzora nad vsakim delom kode. Strukturo HTML je mogoče spremeniti, vendar ne morete ustvariti harmonike po meri. Zato sestavimo razdelek s pogostimi vprašanji po meri z uporabo naprednega CSS.

Ustvarite svoj razdelek s pogostimi vprašanji po meri

Obstajata dve priljubljeni metodi za ustvarjanje harmonike po meri samo za CSS. Uporabite lahko potrditvena polja ali izbirne gumbe; razložili bomo obe metodi.

Uporaba metode potrditvenega polja

Metoda potrditvenega polja uporablja potrditveno polje kot vrsta vnosa. Ko uporabnik izbere zavihek, označi potrditveno polje in ta se odpre. Z metodo potrditvenega polja lahko hkrati odprete več zavihkov, podobno kot lahko označite več kot eno potrditveno polje znotraj HTML obrazec.

HTML

Samo harmonika CSS po meri (pogosta vprašanja)

Uporaba metode potrditvenega polja






Kako zgraditi harmoniko po meri samo s CSS?


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









Kako spremeniti višino psevdoelementov?


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

Splošni CSS

Uporabite osnovni CSS na telo.

telo {
 barva: #502c2c;
 ozadje: #f1edec;
 oblazinjenje: 1,2 rem;
 družina pisav: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 največja širina: 45rem;
 marža: 0 samodejno;
 velikost pisave: 1,2 rem;
}

Oblikovanje harmonike

Najprej skrijte potrditvena polja tako, da spremenite vnos.

/* Skrivanje potrditvenih polj ali izbirnega gumba*/
vnos {
 položaj: absolutni;
 motnost: 0;
 z-indeks: -1;
}

Zdaj oblikujte harmoniko. Dodate lahko::po psevdo-element za + znak. Lahko se sklicujete na a Referenčni diagram entitete znakov in uporabite katero koli Kalkulator za pretvorbo entitet da poiščete CSS vrednost številske vrednosti. Tukaj je vrednost CSS + je \002B.

/* Slogi harmonike */
.faq {
 barva: #ffe3e3;
 rob-dno: 3rem;
}
.faq-label {
 velikost pisave: 1,5 rem;
 zaslon: flex;
 align-items: center;
 justify-content: prostor-med;
 oblazinjenje: 1em;
 ozadje: #b61818;
 teža pisave: krepko;
 kazalec: kazalec;
 uporabniški izbor: brez;
}
.faq-label:: po {
 vsebina: '\002B';
 oblazinjenje: 0,51 rem;
 preobrazba: lestvica (1,8);
 poravnava besedila: središče;
 prehod: vse 0,35s;
}
.faq-content {
 največja višina: 0;
 oblazinjenje: 0 1em;
 barva: #2c3e50;
 ozadje: belo;
 prehod: vse 0,35s;
 zaslon: brez;
}

Zdaj pa dodajmo funkcionalnost harmoniki z uporabo sosednji in atributni izbirniki. tukaj, \2013 je vrednost CSS za –, številčna vrednost, ki predstavlja –.

vnos: preverjeno + .faq-label {
 ozadje: #8f1414;
}
vnos: preverjeno + .faq-label:: po {
 vsebina: '\2013';
 transformacija: lestvica (1,5);
}
vnos: preverjeno ~ .faq-content {
 največja višina: 100vh;
 oblazinjenje: 1em;
 zaslon: blok;
 prehod: vse 0,35s;
}

Izhod:

Uporaba metode radijskega gumba

Metoda radijskega gumba ima nastavljeno vrsto vnosa radio. Ko uporabnik klikne zavihek, se odpre skriti izbirni gumb, ki ustreza temu zavihku. Ko kliknete naslednji zavihek, se prejšnji zavihek takoj zapre. Z metodo izbirnega gumba lahko odprete samo en zavihek hkrati.

HTML

Samo harmonika CSS po meri (pogosta vprašanja)

Uporaba metode radijskega gumba






Kako ustvariti harmoniko z metodo radijskega gumba?


 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.









Kako ustvariti harmoniko po meri samo s 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.









Kaj pomeni slog harmonike?


 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? Vel, ne!









Zapri vse ×

CSS

Kopirajte zgornji CSS metode potrditvenega polja, saj se obe metodi razlikujeta samo od strukturnega vidika. Morda boste opazili, da je ves čas odprt en zavihek. To se zgodi, ker izbirnih gumbov, kot so potrditvena polja, ne morete odstraniti. Če želite to narediti, dodajte spodnjo kodo CSS izbirnemu gumbu »Zapri vse« brez opisa.

/* Zapiranje vseh */
.faq-label {
 položaj: relativni;
}
.faq-close {
 zaslon: inline-block;
 oblazinjenje: 1 rem;
 velikost pisave: 1rem;
 ozadje: #b61818;
 kazalec: kazalec;
 položaj: absolutni;
 levo: 64rem;
}

Izhod:

Nadaljujte z eksperimentiranjem in dodajte animacije

Za harmonikami je preprosta logika: ko kliknete na meni, se prikaže njegova skrita vsebina. Ker zdaj znate ustvariti harmoniko, je skrajni čas, da implementirate in eksperimentirate z učenjem. Za izboljšanje dizajna lahko zgradite vodoravne harmonike, zlasti pri prikazovanju slik. Eksperimentirajte s kodo tako, da prilagodite učinek prehoda z uporabo animacij ključnih kadrov.

Naincy Mourya (Objavljenih 16 člankov)

Naincy je specializirana za izgradnjo zelo odzivnih spletnih mest in učinkovite vsebinske strategije skupaj s spletnimi kopijami. Je svobodna pisateljica o tehnologiji, ki budno spremlja trendne tehnologije.

Več od Naincy Mourya