Teg HTML-sahifalarida bloklarni yaratish uchun veb-dizaynda faol foydalaniladi, uning ichiga har qanday tabiat mazmuni - matn, rasm, jadval va boshqalarni joylashtirish mumkin.
Ko'rsatmalar
1-qadam
Ishlatilganda tugatish yorlig'i talab qilinadi. U quyidagi atributlar bilan ishlatilishi mumkin:
- hizalamak - hizalamak (chap, markaz, o'ng, oqlash), masalan, Matn;
- sinf - sinf nomi (Matn);
- id - HTML yorlig'i identifikatorining nomi;
- uslub uslubi yo'nalishi;
- sarlavha - ko'rsatma.
2-qadam
Bloklardan foydalanganda uslublar varag'idan foydalanish maqsadga muvofiqdir. Misol uchun, agar siz sahifadagi tarkib bilan ikki xil blok yaratmoqchi bo'lsangiz, unda kod quyidagicha ko'rinadi:
.block1 {
kengligi: 500 piksel;
balandligi: 200 piksel;
fon: sariq;
to'ldirish: 0px;
to'ldirish-o'ng: 0px;
chegara: qattiq 0px qora;
suzuvchi: chap;
}
.block2 {
kengligi: 200 piksel;
balandligi: 500;
fon: Yashil;
to'ldirish: 0px;
to'ldirish-o'ng: 0px;
chegara: qattiq 0px qora;
suzuvchi: o'ng;
}
Sariq blok kengligi 500px va uzunligi 200px bo'lgan birinchi blokdir.
Yashil blok kengligi 200px va uzunligi 500px bo'lgan birinchi blokdir.
3-qadam
Bloklarning o'ng tomoniga / chap tomoniga tekislash uslublar yordamida o'rnatilishi mumkin:
.leftimg {
suzuvchi: chap;
hoshiya: 5px 15px 7px 0;
}
.rightimg {
suzuvchi: o'ng;
hoshiya: 7px 0 7px 7px;
}
4-qadam
Yorliq yordamida rasmlarning o'zgaruvchan o'zgarishini tashkil qilishingiz mumkin.
div # rotator {pozitsiyasi: nisbiy; balandligi: 150 piksel; hoshiya-chap: 15px;}
div # rotator ul li {float: left; pozitsiya: mutlaq; ro'yxat uslubi: yo'q;}
div # rotator ul li.show {z-index: 500;}
theRotator () {funktsiyasi
$ ('div # rotator ul li'). css ({opacity: 0.0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('rotate ()', 5000);
}
funktsiya rotate () {
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 ({xira: 0.0})
.addClass ('show')
.animate ({shaffoflik: 1.0}, 1000);
current.animate ({shaffoflik: 0,0}, 1000)
.removeClass ('show');
};
$ (document).ready (function () {
theRotator ();
});
