Etiket html səhifələrində bloklar yaratmaq üçün veb dizaynında aktiv şəkildə istifadə olunur, içərisinə hər hansı bir təbiət - mətn, şəkil, cədvəl və s. Yerləşdirə bilərsiniz.
Təlimat
Addım 1
İstifadə edildikdə, bir son etiketi tələb olunur. Aşağıdakı atributlarla istifadə edilə bilər:
- hizalama - hizalama (sol, mərkəz, sağ, əsaslandır), məsələn, Mətn;
- sinif - sinif adı (Mətn);
- id - html etiket identifikatorunun adı;
- üslub - üslub istiqaməti;
- başlıq - ipucu.
Addım 2
Bloklardan istifadə edərkən bir stil cədvəlindən istifadə etmək məsləhətdir. Məsələn, bir səhifədəki məzmunu olan iki fərqli blok yaratmaq istəyirsinizsə, kod aşağıdakı kimi görünür:
.block1 {
eni: 500px;
hündürlük: 200 piksel;
fon: sarı;
dolgu: 0px;
doldurma-sağ: 0px;
haşiyə: qatı 0px qara;
üzmək: sol;
}
.block2 {
genişlik: 200 piksel;
hündürlük: 500;
fon: Yaşıl;
dolgu: 0px;
doldurma-sağ: 0px;
haşiyə: qatı 0px qara;
üzmək: sağ;
}
Sarı blok eni 500px və uzunluğu 200px olan ilk blokdur.
Yaşıl blok eni 200px və uzunluğu 500px olan ilk blokdur.
Addım 3
Blokların sağ / sol hizalaması üslublardan istifadə etməklə qurula bilər:
.leftimg {
üzmək: sol;
margin: 5px 15px 7px 0;
}
.rightimg {
üzmək: sağ;
margin: 7px 0 7px 7px;
}
Addım 4
Etiketin köməyi ilə şəkillərin dəyişən dəyişməsini təşkil edə bilərsiniz.
div # rotator {mövqe: nisbi; hündürlük: 150 piksel; margin sol: 15px;}
div # rotator ul li {float: left; mövqe: mütləq; siyahı stili: yoxdur;}
div # rotator ul li.show {z-index: 500;}
theRotator () funksiyası {
$ ('div # rotator ul li'). css ({qeyri-şəffaflıq: 0.0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('rotate ()', 5000);
}
funksiya döndür () {
var current = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: first'));
var next = ((current.next (). length)? ((current.next (). hasClass ('show'))? $ ('div # rotator ul li: first'): current.next ()): $ ('div # rotator ul li: first'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var next = $ (sibs [rndNum]);
next.css ({qeyri-şəffaflıq: 0.0})
.addClass ('show')
.animate ({qeyri-şəffaflıq: 1.0}, 1000);
cari.animate ({qeyri-şəffaflıq: 0.0}, 1000)
.removeClass ('show');
};
$ (sənəd). hazırdır (function () {
theRotator ();
});
