Tipik olaraq, veb saytlardakı qrafik oxlar naviqasiyanı təşkil etmək üçün istifadə olunur. Belə bir göstəricini vurduğunuzda, başqa bir səhifəyə və ya cari səhifənin başqa bir hissəsinə keçəcəksiniz. Bəzən bəzi hərəkətlər onlara bağlıdır - etiket sahəsinin məzmununu vurğulamaq, JavaScript skriptini işə salmaq və s. Bu oxun aktiv bir element olduğunu vurğulamaq üçün "vurğulamaq" effektini istifadə edin, yəni. siçan üzərində görünüşdəki dəyişikliklər.
Zəruri
HTML və CSS dilləri haqqında əsas biliklər
Təlimat
Addım 1
Ok vurğulamağın həyata keçirilməsinin sizin üçün ən yaxşı mexanizmini müəyyənləşdirin. Bunlardan bir neçəsi var, iki sadə olan bu təlimatın sonrakı mərhələlərində verilmişdir. Hər ikisi də CSS hover yalançı sinifindən istifadə edirlər. Siçan kursoru bir qrafik elementinin (ox) üstündə olduqda, bu yalançı sinifdə təsvir olunan üslub tətbiq olunur və qalan müddətdə bu üslub aktiv deyil. Aşağıda təsvir edilən hər iki seçim üçün eyni HTML-dən istifadə edə bilərsiniz. kod, lakin fərqli üslub təsvirləri. Səhifədəki ox kodu aşağıdakı kimi yazıla bilər: id atributu brauzerin ona hansı təsvirlərin tətbiq olunacağını təyin edəcəyi bağlantı identifikatorunu (arrowA) müəyyənləşdirir.
Addım 2
İlk seçim arxa işıqlı və işıqsız iki ox şəkli hazırlamağınızı tələb edəcəkdir. Bunları sırasıyla arrON.
a # arrowA, a # arrowA: ziyarət edildi {
ekran: blok;
hündürlük: 30 piksel;
genişlik: 100px;
arxa plan: url (arrOFF.gif) təkrarlanmayan;
sərhəd: 0;
}
a # oxA: hover {
arxa plan: url (arrON.gif) təkrarlanmaz;
sərhəd: 0;
}
İlk blok oxun ölçülərini ehtiva edir (hündürlük: 30px; eni: 100px;) - onları hazırlanmış ox şəkillərinin ölçüləri ilə əvəz edin.
Addım 3
İkinci seçim yalnız bir şəkil faylı ilə keçməyə imkan verir. İçindəki oxun hər iki şəklini yerləşdirməlisiniz - həm vurğulanmış, həm də hərəkətsiz. Onları yan-yana yerləşdirə bilərsiniz, birinin üstündən birini edə bilərsiniz. Nümunə kodunda vurğulanmış oxun hərəkətsiz birinin altına qoyulduğunu və faylın sizin tərəfinizdən arr.
a # arrowA, a # arrowA: ziyarət edildi {
ekran: blok;
genişlik: 100px;
hündürlük: 30 piksel;
arxa plan: url (arr.gif) təkrarlanmaz;
sərhəd: 0;
}
a # oxA: hover {
arxa plan: url (arr.gif) təkrarlanan 31px;
sərhəd: 0;
}
Burada da ölçüsünü dəyişdirməyi unutmayın.
