Ovaj će vodič objasniti kako izraditi kartice pomoću CSS-a i JavaScripta.
Kako stvoriti kartice pomoću CSS-a i JavaScripta?
U ovom odjeljku nalaze se upute korak po korak za izradu kartica pomoću CSS-a i JavaScripta.
Korak 1: Stvorite strukturu kartica pomoću HTML-a
Prvo pogledajte HTML kôd koji stvara strukturu HTML kartica:
< div id = 'tab1' na klik = 'prvi()' > Dom div >
< div id = 'tab2' na klik = 'drugi();' > Oko div >
< div id = 'tab3' na klik = 'treći();' > Kontaktirajte nas div >
< br />
< div id = 'nastavak1' > Dobrodošli u Linuxhint ! div >
< div id = 'nastavak2' > TEHNOLOŠKO OBRAZOVANJE
Napravili smo mnogo proizvoda koji će vam pomoći da naučite o Linuxu, programiranju, informatici itd.
div >
< div id = 'nastavak3' >
Naš tim možete kontaktirati na uredniku AT linuxhint DOT com.
div >
U gornjim linijama koda:
- ' ” dodaje element div s ID-om „tab1” i priloženim „ na klik ' događaj za izvršenje povezanog ' prvi() ” kada se klikne. Ovaj element djeluje kao HTML kartica.
- Gornja metoda izvodi se za sljedeća dva div elementa.
- '
” dodaje prijelom retka.- '
” ponovno umeće element div koji ima dodijeljeni ID „cont1”. Ovaj element prikazuje sadržaj kreirane kartice u bloku.- Sljedeća dva'
” oznake također dodaju div elemente s njihovim dodijeljenim ID-ovima.
Korak 2: Stilske kartice pomoću CSS-aSada primijenite svojstva CSS stila kako biste prilagodili kartice i njihov sadržaj prema svom izboru:
< stil >
#tab1, #tab2, #tab3 {
plutati : lijevo ;
podstava : 5px 10px 5px 10px ;
pozadina : narančasto ;
boja : #FFFFFF ;
margina : 0px 5px 0px 5px ;
kursor : pokazivač ;
granica - radius : 3 px ;
}
#tab1 : lebdite, #tab2 : lebdite, #tab3 : lebdjeti {
pozadina : zelena ;
}
#nastavak1, #nastavak2, #nastavak3 {
širina : 300 px ;
visina : 100 px ;
podstava : 40 px ;
font - veličina : srednji ;
font - obitelj : 'Times New Roman' , Vremena, serif ;
granica : 2 px puno narančasto ;
granica - radius : 7px ;
prikaz : nikakav ;
}
stil >U navedenom isječku koda:
- Prvo, pristupite ' kartice ” pomoću njihovih dodijeljenih ID-ova i prilagodite ih putem sljedećih svojstava stila (float, padding, background, color, margin: 0px 5px 0px 5px, cursor, and border-radius).
- Zatim priložite ' lebdjeti ” rukovatelj događajima s karticama za promjenu boje pozadine kada korisnik mišem prijeđe iznad njih.
- Nakon toga pristupite ' sadržaj kartica ” pohranjenih u div elementima čiji su ID-ovi “cont1”, “cont2” i “cont3”. Sada na njih primijenite sljedeća svojstva stila (širina, visina, ispuna, veličina fonta, obitelj fontova, obrub, radijus obruba i prikaz).
Korak 3: Dodajte funkcije karticama pomoću JavaScriptaNa kraju, dodajte funkcionalnosti stvorenim karticama uz pomoć JavaScripta:
< skripta >
funkcija prva ( ) {
dokument. getElementById ( 'nastavak1' ) . stil . prikaz = 'blok' ;
dokument. getElementById ( 'nastavak2' ) . stil . prikaz = 'ništa' ;
dokument. getElementById ( 'nastavak3' ) . stil . prikaz = 'ništa' ;
}
funkcija druga ( ) {
dokument. getElementById ( 'nastavak2' ) . stil . prikaz = 'blok' ;
dokument. getElementById ( 'nastavak1' ) . stil . prikaz = 'ništa' ;
dokument. getElementById ( 'nastavak3' ) . stil . prikaz = 'ništa' ;
}
funkcija treća ( ) {
dokument. getElementById ( 'nastavak3' ) . stil . prikaz = 'blok' ;
dokument. getElementById ( 'nastavak1' ) . stil . prikaz = 'ništa' ;
dokument. getElementById ( 'nastavak2' ) . stil . prikaz = 'ništa'
}
skripta >Gornje linije koda:
- Definirajte funkciju pod nazivom ' prvi ”.
- U ovoj definiciji funkcije, ' document.getElementById() ” pristupa elementu div čiji je ID „cont1” i primjenjuje „ stil ' nekretnina s ' blok ” vrijednost za to. Ovo svojstvo će prikazati sadržaj kartice na koju korisnik klikne.
- Zatim, “document.getElementById()” pristupa drugom divu i primjenjuje svojstvo “style” koje ima vrijednost “none” da ga sakrije. Sakrit će taj element na web stranici.
- Gornja metoda izvodi se za sljedeće div elemente kojima se pristupa. To je zato što funkcija 'prva' prikazuje samo sadržaj kartice čija je vrijednost svojstva 'style' 'block' i skriva ostale.
- Gornji postupak izvodi se za sljedeće funkcije “second()” i “third()”.
Izlaz
Može se vidjeti da su kartice uspješno kreirane i prikazuju svoj sadržaj na klik korisnika.
Zaključak
Da biste izradili kartice, prvo izgradite njihove strukture pomoću 'HTML-a', a zatim ih prilagodite uz pomoć CSS svojstava stila. Svojstva stila dodaju se bez izvoza ikakvih dodatnih lista stilova. Ova svojstva čine kartice privlačnima i privlačnima. Nakon što su kartice izrađene i prilagođene, upotrijebite programski jezik JavaScript da im dodate funkcionalnosti. Ovaj vodič je praktično objasnio cijeli postupak za stvaranje kartica sa CSS-om i JavaScriptom.