Odatda, veb-saytlardagi grafik o'qlar navigatsiyani tashkil qilish uchun ishlatiladi. Bunday ko'rsatkichni bosganingizda, boshqa sahifaga yoki joriy sahifaning boshqa qismiga o'tasiz. Ba'zida ba'zi harakatlar ularga bog'liqdir - yorliq maydonining tarkibini ta'kidlash, JavaScript-ni ishga tushirish va hk. Ushbu o'q faol element ekanligini ta'kidlash uchun "ta'kidlash" effektidan foydalaning, ya'ni. sichqonchaning tashqi ko'rinishidagi o'zgarishlar.
Kerakli
HTML va CSS tillari haqida asosiy bilimlar
Ko'rsatmalar
1-qadam
Siz uchun o'qni ajratib ko'rsatishni amalga oshirish mexanizmini aniqlang. Ularning bir nechtasi bor, ikkitasi oddiy, ushbu ko'rsatmaning keyingi bosqichlarida berilgan. Ularning ikkalasi ham CSS hover psevdo-class-dan foydalanadilar. Sichqoncha kursori grafik element (o'q) ustida bo'lsa, unga ushbu psevdo-klassda tasvirlangan uslub qo'llaniladi, qolgan vaqt esa ushbu uslub faol bo'lmaydi. Quyida tavsiflangan ikkala variant uchun ham bir xil HTML-dan foydalanishingiz mumkin kod, lekin turli xil uslub tavsiflari. Sahifa manbasidagi o'q kodini quyidagicha yozish mumkin: id atributi havola identifikatorini (arrowA) belgilaydi, bu orqali brauzer unga uslub tavsiflaridan qaysi birini qo'llash kerakligini aniqlaydi.
2-qadam
Birinchi variant sizga ikkita o'q tasvirini tayyorlashni talab qiladi. Ularni navbati bilan arrON.
a # arrowA, a # arrowA: tashrif buyurilgan {
displey: blok;
balandligi: 30 piksel;
kengligi: 100 piksel;
fon: url (arrOFF.gif) takrorlanmaydi;
chegara: 0;
}
a # arrowA: hover {
fon: url (arrON.gif) takrorlanmaydi;
chegara: 0;
}
Birinchi blok o'q o'lchamlarini o'z ichiga oladi (balandligi: 30px; kengligi: 100px;) - ularni tayyorlangan o'q tasvirlari o'lchamlari bilan almashtiring.
3-qadam
Ikkinchi variant faqat bitta rasm fayli bilan ishlashga imkon beradi. Unda siz o'qning ikkala rasmini ham joylashtirishingiz kerak - ham ta'kidlangan, ham harakatsiz. Siz ularni yonma-yon joylashtirishingiz mumkin, ikkinchisining ustiga qo'yishingiz mumkin. Namuna kodida biz ajratilgan strelka harakatsiz o'q ostiga qo'yilgan deb o'ylaymiz va fayl siz tomonidan arr.
a # arrowA, a # arrowA: tashrif buyurilgan {
displey: blok;
kengligi: 100 piksel;
balandligi: 30 piksel;
fon: url (arr.gif) takrorlanmaydi;
chegara: 0;
}
a # arrowA: hover {
fon: url (arr.gif) takrorlanmaydigan 31px;
chegara: 0;
}
Bu erda ham o'lchamlarini o'zgartirishni unutmang.
