Kuidas Nooli Esile Tuua

Sisukord:

Kuidas Nooli Esile Tuua
Kuidas Nooli Esile Tuua

Video: Kuidas Nooli Esile Tuua

Video: Kuidas Nooli Esile Tuua
Video: Kuidas oma äri paremini digikanalites esile tuua - Siiri Tiivits-Puttonen 2024, Märts
Anonim

Tavaliselt kasutatakse navigeerimise korraldamiseks veebisaitide graafilisi nooli. Sellisel kursoril klõpsates lähete teisele lehele või praeguse lehe teisele jaotisele. Mõnikord on mõned toimingud nendega seotud - sildivälja sisu esiletõstmine, JavaScripti skripti käivitamine jne. Rõhutamaks, et see nool on aktiivne element, kasutage efekti "esile tõstmine", st. välimuse muutused hiire kohal.

Kuidas nooli esile tuua
Kuidas nooli esile tuua

Vajalik

Põhiteadmised HTML- ja CSS-keeltest

Juhised

Samm 1

Tehke kindlaks, milline noole esiletõstmise rakendamise mehhanism on teie jaoks parim. Neid on mitu, selle juhise järgnevates etappides antakse kaks lihtsat. Mõlemad kasutavad CSS hõljukpseudoklassi. Kui hiirekursor asub graafilise elemendi (noole) kohal, rakendatakse sellele selles pseudoklassis kirjeldatud stiili ja ülejäänud aeg pole see stiil aktiivne. Mõlema allpool kirjeldatud võimaluse korral saate kasutada sama HTML-i kood, kuid erinevad stiilikirjeldused. Lehe allika noolekoodi saab kirjutada järgmiselt: Atribuut id määrab lingi identifikaatori (nool A), mille abil brauser määrab, milliseid stiilikirjeldusi sellele rakendada.

2. samm

Esimene võimalus nõuab kahe noolepildi ettevalmistamist - nii taustvalgustusega kui ka ilma. Salvestage need failidesse, mille nimed on vastavalt arrON.

# noolA, # noolA: külastatud {

kuva: plokk;

kõrgus: 30px;

laius: 100px;

taust: url (arrOFF.gif) ei kordu;

piir: 0;

}

a # arrowA: hõljutage {

taust: url (arrON.gif) ei kordu;

piir: 0;

}

Esimene plokk sisaldab noole mõõtmeid (kõrgus: 30px; laius: 100px;) - asendage need ettevalmistatud noolepiltide mõõtmetega.

3. samm

Teine võimalus võimaldab teil läbi saada ainult ühe pildifailiga. Sinna peate paigutama mõlemad noole kujutised - nii esiletõstetud kui ka passiivsed. Võite asetada need kõrvuti, saate üksteise kohal. Proovikoodis eeldame, et esiletõstetud nool asetatakse passiivse alla ja teie nimi on fail arr.gif. Seda pilti, nagu ka eelmises versioonis, kasutatakse lingi taustana. Kuna objekti mõõtmed on toodud stiilikirjelduses, pole kogu ülejäänud taust (esile tõstetud nool), mis nendesse ei mahu, veebisurfarile nähtav. Pseudo-stiilis hõljuki kirjelduses on täpsustatud nihe taustpildi positsioneerimisel, nii et kui kursori lingi kohale viia, muutub nähtavaks veel üks sektsioon ja nüüd ilmub passiivne nool ekraaniväliselt.

# noolA, # noolA: külastatud {

kuva: plokk;

laius: 100px;

kõrgus: 30px;

taust: url (arr.gif) ei kordu;

piir: 0;

}

a # arrowA: hõljutage {

taust: url (arr.gif) ei kordu 31 pikslit;

piir: 0;

}

Ärge unustage ka siin suurust muuta.

Soovitan: