Biasanya, anak panah grafik di laman web digunakan untuk mengatur navigasi. Apabila anda mengklik penunjuk seperti itu, anda pergi ke halaman lain atau ke bahagian lain dari halaman semasa. Kadang-kadang beberapa tindakan terikat padanya - menyoroti isi bidang tag, melancarkan skrip JavaScript, dll. Untuk menekankan bahawa anak panah ini adalah elemen aktif, gunakan kesan "sorotan", iaitu. perubahan penampilan pada mouseover.
Perlu
Pengetahuan asas bahasa HTML dan CSS
Arahan
Langkah 1
Tentukan mekanisme untuk melaksanakan penonjolan anak panah yang terbaik untuk anda. Terdapat beberapa di antaranya, dua yang mudah diberikan pada langkah seterusnya arahan ini. Mereka berdua menggunakan kelas pseudo CSS hover. Apabila kursor tetikus berada di atas elemen grafik (anak panah), gaya yang dijelaskan dalam kelas pseudo ini diterapkan padanya, dan selebihnya gaya ini tidak aktif. Untuk kedua-dua pilihan yang dijelaskan di bawah, anda boleh menggunakan HTML yang sama kod, tetapi penerangan gaya yang berbeza. Kod anak panah di sumber halaman dapat ditulis seperti berikut: Atribut id menentukan pengenal pautan (panahA), dengan mana penyemak imbas akan menentukan perihalan gaya mana yang harus diterapkan padanya.
Langkah 2
Pilihan pertama memerlukan anda menyediakan dua gambar anak panah - dengan dan tanpa lampu latar. Simpannya ke fail dengan nama seperti arrON.
a # arrowA, # panahA: dilawati {
paparan: blok;
tinggi: 30px;
lebar: 100px;
latar belakang: url (arrOFF.gif) tidak berulang;
sempadan: 0;
}
a # panahA: arahkan {
latar belakang: url (arrON.gif) tidak berulang;
sempadan: 0;
}
Blok pertama mengandungi dimensi anak panah (tinggi: 30 piksel; lebar: 100 piksel;) - gantikannya dengan dimensi gambar anak panah yang disediakan.
Langkah 3
Pilihan kedua membolehkan anda mendapatkan hanya dengan satu fail gambar. Anda perlu meletakkan kedua-dua gambar anak panah di dalamnya - keduanya diserlahkan dan tidak aktif. Anda boleh meletakkannya bersebelahan, anda boleh meletakkannya di atas yang lain. Dalam contoh kod, kami akan menganggap bahawa anak panah yang diserlahkan diletakkan di bawah yang tidak aktif, dan fail tersebut bernama arr.
a # arrowA, # panahA: dilawati {
paparan: blok;
lebar: 100px;
tinggi: 30px;
latar belakang: url (arr.gif) tidak berulang;
sempadan: 0;
}
a # panahA: arahkan {
latar belakang: url (arr.gif) 31px tanpa ulangan;
sempadan: 0;
}
Jangan lupa untuk menukar saiznya di sini juga.
