Ez az útmutató elmagyarázza, hogyan hozhat létre lapokat CSS-sel és JavaScripttel.
Hogyan lehet lapokat létrehozni CSS-sel és JavaScripttel?
Ez a rész lépésről lépésre tartalmazza a lapok CSS és JavaScript használatával történő létrehozását.
1. lépés: Lapszerkezet létrehozása HTML használatával
Először nézze meg a HTML-kódot, amely létrehozza a HTML lapok szerkezetét:
< div id = 'tab1' kattintásra = 'első()' > itthon div >
< div id = 'tab2' kattintásra = 'második();' > Ról ről div >
< div id = 'tab3' kattintásra = 'harmadik();' > Lépjen kapcsolatba velünk div >
< br />
< div id = 'folytatás1' > Üdvözöljük a Linuxhintben ! div >
< div id = 'folytatás2' > TECHNOLÓGIA OKTATÁS
Számos terméket építettünk, amelyek segítségével megismerheti a Linuxot, a programozást, a számítástechnikát és még sok mást.
div >
< div id = 'folytatás3' >
Felveheti a kapcsolatot csapatunkkal a editor AT linuxhint DOT com címen.
div >
A fenti kódsorokban:
- A ' ” címke hozzáad egy div elemet egy „tab1” azonosítóval és egy csatolt „ kattintásra ' esemény a linkelt ' első() ” funkciót, ha rákattint. Ez az elem HTML lapként működik.
- A fenti módszert a következő két div elemre hajtjuk végre.
- A '
” címke sortörést ad hozzá.- A '
” címke ismét beszúr egy div elemet, amelynek hozzárendelt „cont1” azonosítója. Ez az elem egy blokkban jeleníti meg a létrehozott lap tartalmát.- A következő két'
” címkék is hozzáadnak div elemeket a hozzájuk rendelt azonosítókkal.
2. lépés: Stílus lapok CSS használatávalMost alkalmazza a CSS stílustulajdonságait a lapok és tartalmuk testreszabásához választása szerint:
< stílus >
#tab1, #tab2, #tab3 {
úszó : bal ;
párnázás : 5px 10px 5px 10px ;
háttér : narancsvörös ;
szín : #FFFFFF ;
árrés : 0px 5px 0px 5px ;
kurzor : mutató ;
határ - sugár : 3 képpont ;
}
#tab1 : lebeg, #tab2 : lebeg, #tab3 : lebeg {
háttér : zöld ;
}
#cont1, #cont2, #cont3 {
szélesség : 300 képpont ;
magasság : 100 képpont ;
párnázás : 40 képpont ;
betűtípus - méret : közepes ;
betűtípus - család : 'Times New Roman' , Times, serif ;
határ : 2px tömör narancssárga ;
határ - sugár : 7 képpont ;
kijelző : egyik sem ;
}
stílus >A megadott kódrészletben:
- Először nyissa meg a „ lapokat ” a hozzárendelt azonosítók használatával, és testreszabhatja azokat a következő stílustulajdonságok segítségével (lebegés, kitöltés, háttér, szín, margó: 0px 5px 0px 5px, kurzor és szegélysugár).
- Ezután csatolja a „ lebeg ” eseménykezelő a lapokkal, hogy megváltoztassák a háttérszínüket, amikor a felhasználó rájuk viszi az egeret.
- Ezt követően nyissa meg a „ lapok tartalma ” a div elemekben tárolva, amelyek azonosítói „cont1”, „cont2” és „cont3”. Most alkalmazza rájuk a következő stílustulajdonságokat (szélesség, magasság, kitöltés, betűméret, betűcsalád, szegély, szegélysugár és megjelenítés).
3. lépés: Funkciók hozzáadása a lapokhoz JavaScript használatávalVégül adjon hozzá funkciókat a létrehozott lapokhoz JavaScript segítségével:
< forgatókönyv >
funkció először ( ) {
dokumentum. getElementById ( 'folytatás1' ) . stílus . kijelző = 'Blokk' ;
dokumentum. getElementById ( 'folytatás2' ) . stílus . kijelző = 'egyik sem' ;
dokumentum. getElementById ( 'folytatás3' ) . stílus . kijelző = 'egyik sem' ;
}
funkció második ( ) {
dokumentum. getElementById ( 'folytatás2' ) . stílus . kijelző = 'Blokk' ;
dokumentum. getElementById ( 'folytatás1' ) . stílus . kijelző = 'egyik sem' ;
dokumentum. getElementById ( 'folytatás3' ) . stílus . kijelző = 'egyik sem' ;
}
funkció harmadik ( ) {
dokumentum. getElementById ( 'folytatás3' ) . stílus . kijelző = 'Blokk' ;
dokumentum. getElementById ( 'folytatás1' ) . stílus . kijelző = 'egyik sem' ;
dokumentum. getElementById ( 'folytatás2' ) . stílus . kijelző = 'egyik sem'
}
forgatókönyv >A fenti kódsorok:
- Határozzon meg egy '' nevű függvényt első ”.
- Ebben a függvénydefinícióban a „ document.getElementById() ' metódus eléri a div elemet, amelynek azonosítója 'cont1', és alkalmazza a ' stílus ' ingatlan egy ' Blokk ” érték rajta. Ez a tulajdonság annak a lapnak a tartalmát jeleníti meg, amelyre a felhasználó rákattint.
- Ezután a „document.getElementById()” hozzáfér egy másik div-hez, és a „none” értékkel rendelkező „style” tulajdonságot alkalmazza annak elrejtésére. Elrejti ezt az elemet a weboldalon.
- A fenti módszert a következőleg elért div elemekre hajtjuk végre. Ennek az az oka, hogy a „first” funkció csak annak a lapnak a tartalmát jeleníti meg, amelynek „style” tulajdonságának értéke „block”, és elrejti a többit.
- A fenti eljárást a következő „second()” és „third()” függvényekre hajtjuk végre.
Kimenet
Látható, hogy a lapok létrehozása sikeresen megtörtént, és a felhasználói kattintásra megjelenítik a megfelelő tartalmukat.
Következtetés
A lapok létrehozásához először készítse el a struktúrájukat a „HTML” használatával, majd szabja testre a CSS stílustulajdonságok segítségével. A stílustulajdonságok hozzáadódnak további stíluslap exportálása nélkül. Ezek a tulajdonságok vonzóvá és szemet gyönyörködtetővé teszik a füleket. Miután létrehozta és testreszabta a lapokat, használja a JavaScript programozási nyelvet, hogy funkciókat adjon hozzájuk. Ez az útmutató gyakorlatilag elmagyarázza a lapok CSS és JavaScript használatával történő létrehozásának teljes folyamatát.