Grafiese pyle op webwerwe word gewoonlik gebruik om die navigasie te organiseer. As u op so 'n wyser klik, gaan u na 'n ander bladsy of na 'n ander gedeelte van die huidige bladsy. Soms word sommige aksies daaraan gekoppel - om die inhoud van die tag-veld uit te lig, 'n JavaScript-script te begin, ens. Om te beklemtoon dat hierdie pyl 'n aktiewe element is, gebruik die "hoogtepunt" -effek, d.w.s. veranderinge in voorkoms tydens muis-oor.
Nodig
Basiese kennis van HTML- en CSS-tale
Instruksies
Stap 1
Bepaal watter meganisme vir die implementering van die pylmarkering die beste vir u is. Daar is 'n paar daarvan; twee eenvoudige word in die volgende stappe van hierdie instruksie gegee. Hulle gebruik albei die CSS-pseudoklas. As die muisaanwyser oor 'n grafiese element (pyltjie) is, word die styl wat in hierdie pseudoklas beskryf word daarop toegepas, en die res van die tyd is hierdie styl nie aktief nie. Vir albei opsies hieronder kan u dieselfde HTML gebruik kode, maar verskillende stylbeskrywings. Die pylkode in die bladsybron kan soos volg geskryf word: Die id-kenmerk spesifiseer die skakel-identifiseerder (pylA), waarmee die blaaier sal bepaal watter stylbeskrywings daarop toegepas moet word.
Stap 2
Die eerste opsie vereis dat u twee pylbeelde voorberei - met en sonder agterlig. Stoor dit in lêers met onderskeidelik arrON.
a # arrowA, a # arrowA: besoek {
vertoon: blok;
hoogte: 30px;
breedte: 100px;
agtergrond: url (arrOFF.gif) no-repeat;
grens: 0;
}
a # pylA: sweef {
agtergrond: url (arrON.gif) no-repeat;
grens: 0;
}
Die eerste blok bevat die afmetings van die pyl (hoogte: 30 px; breedte: 100 px;) - vervang dit deur die afmetings van die voorbereide pylbeelde.
Stap 3
Met die tweede opsie kan u met slegs een beeldlêer klaarkom. U moet beide die beelde van die pyl daarin plaas - beide uitgelig en onaktief. U kan dit langs mekaar plaas, u kan mekaar bo mekaar plaas. In die voorbeeldkode gaan ons aanneem dat die gemerkte pyl onder die onaktiewe een geplaas word, en dat die lêer deur u die naam arr.
a # arrowA, a # arrowA: besoek {
vertoon: blok;
breedte: 100px;
hoogte: 30px;
agtergrond: url (arr.gif) no-repeat;
grens: 0;
}
a # pylA: sweef {
agtergrond: url (arr.gif) no-repeat 31px;
grens: 0;
}
Moenie vergeet om ook hier die grootte te verander nie.
