Tyypillisesti verkkosivustojen graafisia nuolia käytetään navigoinnin järjestämiseen. Kun napsautat tällaista osoitinta, siirryt toiselle sivulle tai nykyisen sivun toiselle osalle. Joskus jotkut toiminnot on sidottu niihin - tagikentän sisällön korostaminen, JavaScript-komentosarjan käynnistäminen jne. Korosta, että tämä nuoli on aktiivinen elementti, käytä "korostustehostetta", ts. ulkonäön muutokset hiiren päällä.
Välttämätön
Perustiedot HTML- ja CSS-kielistä
Ohjeet
Vaihe 1
Selvitä, mikä mekanismi nuolenkorostuksen toteuttamiseksi on sinulle paras. Niitä on useita, kaksi yksinkertaista annetaan tämän ohjeen seuraavissa vaiheissa. Molemmat käyttävät CSS-hover-pseudoluokkaa. Kun hiiren kohdistin on graafisen elementin (nuolen) päällä, siihen sovelletaan tässä pseudoluokassa kuvattua tyyliä, ja loppuajaksi tämä tyyli ei ole aktiivinen. Voit käyttää samaa HTML-koodia molemmissa alla kuvatuissa vaihtoehdoissa. koodi, mutta erilaiset tyylikuvaukset. Sivulähteen nuolikoodi voidaan kirjoittaa seuraavasti: Id-attribuutti määrittää linkkitunnisteen (nuoliA), jonka avulla selain päättää, mitä tyylikuvista siihen tulisi käyttää.
Vaihe 2
Ensimmäisessä vaihtoehdossa sinun on valmisteltava kaksi nuolikuvaa - taustavalolla ja ilman. Tallenna ne tiedostoihin, joiden nimet ovat esimerkiksi arrON.
# nuoliA, # nuoliA: vieraili {
näyttö: lohko;
korkeus: 30px;
leveys: 100px;
tausta: url (arrOFF.gif) ei-toisto;
reuna: 0;
}
# nuoliA: vie hiiri {
tausta: url (arrON.gif) ei toista;
reuna: 0;
}
Ensimmäinen lohko sisältää nuolen mitat (korkeus: 30 kuvapistettä; leveys: 100 kuvapistettä;) - korvaa ne valmistettujen nuolikuvien mitoilla.
Vaihe 3
Toinen vaihtoehto antaa sinun päästä toimeen vain yhdellä kuvatiedostolla. Sinun on sijoitettava siihen molemmat nuolen kuvat - sekä korostetut että ei-aktiiviset. Voit sijoittaa ne vierekkäin, voit päällekkäin. Oletuskoodikoodissa oletetaan, että korostettu nuoli sijoitetaan passiivisen alle, ja sinä annat tiedoston nimeksi arr.gif. Tätä kuvaa, kuten edellisessä versiossa, käytetään linkin taustana. Koska objektin mitat ilmoitetaan tyylikuvauksessa, koko muu tausta (korostettu nuoli), joka ei sovi niihin, ei ole web-surffaajan nähtävissä. Pseudotyylisen leijun kuvauksessa määritetään siirtymä taustakuvan sijainnissa, joten kun viet kursorin linkin päälle, uusi osa tulee näkyviin ja passiivinen nuoli ilmestyy näytön ulkopuolelle.
# nuoliA, # nuoliA: vieraili {
näyttö: lohko;
leveys: 100px;
korkeus: 30px;
tausta: url (arr.gif) ei toista;
reuna: 0;
}
# nuoliA: vie hiiri {
tausta: url (arr.gif) ei-toista 31 kuvapistettä;
reuna: 0;
}
Älä unohda muuttaa myös tässä.
