Parasti navigācijas organizēšanai tiek izmantotas vietņu grafiskās bultiņas. Noklikšķinot uz šāda rādītāja, jūs pāriet uz citu lapu vai citu pašreizējās lapas sadaļu. Dažreiz dažas darbības ir saistītas ar tām - tagu lauka satura izcelšana, JavaScript skripta palaišana utt. Lai uzsvērtu, ka šī bulta ir aktīvs elements, izmantojiet efektu "izcelt", t.i. izskata izmaiņas ar peles kursoru.
Nepieciešams
HTML un CSS valodu pamatzināšanas
Instrukcijas
1. solis
Nosakiet, kurš bultiņu izcelšanas mehānisms jums ir vislabākais. No tiem ir vairāki, nākamajos šīs instrukcijas soļos ir doti divi vienkārši. Viņi abi izmanto CSS hover pseidoklasi. Kad peles kursors atrodas virs grafiskā elementa (bultiņas), tam tiek piemērots šajā pseidoklasē aprakstītais stils, un pārējā laikā šis stils nav aktīvs. Abām tālāk aprakstītajām opcijām varat izmantot to pašu HTML kods, bet dažādi stila apraksti. Bultiņas kodu lapas avotā var rakstīt šādi: Atribūts id norāda saites identifikatoru (bulta A), pēc kura pārlūkprogramma noteiks, kurš no stila aprakstiem tam jāpiemēro.
2. solis
Pirmajai opcijai būs jāsagatavo divi bultiņu attēli - ar un bez apgaismojuma. Saglabājiet tos failos ar nosaukumiem, piemēram, arrON.
# bultaA, # bultaA: apmeklēta {
displejs: bloks;
augstums: 30 pikseļi;
platums: 100 pikseļi;
fons: URL (arrOFF.gif) bez atkārtojuma;
apmale: 0;
}
a # bultaA: virziet kursoru {
fons: URL (arrON.gif) neatkārtot;
apmale: 0;
}
Pirmajā blokā ir bultiņas izmēri (augstums: 30 pikseļi; platums: 100 pikseļi;) - aizstājiet tos ar sagatavoto bultiņu attēlu izmēriem.
3. solis
Otrā iespēja ļauj jums iztikt tikai ar vienu attēla failu. Tajā jāievieto abi bultiņas attēli - gan izcelti, gan neaktīvi. Jūs varat tos novietot blakus, jūs varat novietot vienu virs otra. Koda paraugā mēs pieņemsim, ka iezīmētā bulta atrodas zem neaktīvās un failu jūs nosaucat ar.gif. Šis attēls, tāpat kā iepriekšējā versijā, tiek izmantots kā saites fons. Tā kā objekta izmēri ir norādīti stila aprakstā, viss pārējais fons (iezīmētā bulta), kas tajos neietilpst, interneta sērfotājiem nebūs redzams. Pseido stila kursora aprakstā ir norādīta fona attēla pozicionēšanas maiņa, tāpēc, virzot kursoru virs saites, kļūs redzama cita sadaļa, un tagad pasīvā bultiņa parādīsies “ārpus ekrāna”.
# bultaA, # bultaA: apmeklēta {
displejs: bloks;
platums: 100 pikseļi;
augstums: 30 pikseļi;
fons: url (arr.gif) neatkārtot;
apmale: 0;
}
# bultaA: virziet kursoru {
fons: URL (arr.gif) bez atkārtojuma 31 pikseļi;
apmale: 0;
}
Neaizmirstiet mainīt izmēru arī šeit.
