Etiket, web tasarımında, içine herhangi bir içerik - metin, resim, tablo vb. - koyabileceğiniz html sayfalarında bloklar oluşturmak için aktif olarak kullanılır.
Talimatlar
Aşama 1
Kullanıldığında, bir bitiş etiketi gereklidir. Aşağıdaki niteliklerle kullanılabilir:
- hizalama - hizalama (sol, orta, sağ, iki yana yaslayın), örneğin Metin;
- sınıf - sınıf adı (Metin);
- id - html etiket tanımlayıcısının adı;
- stil - stil yönü;
- başlık - araç ipucu.
Adım 2
Blokları kullanırken, bir stil sayfası kullanılması tavsiye edilir. Örneğin, bir sayfada içeriğe sahip iki farklı blok oluşturmak istiyorsanız, kod şöyle görünecektir:
. Blok 1 {
genişlik: 500 piksel;
yükseklik: 200 piksel;
arka plan: Sarı;
dolgu: 0 piksel;
dolgu-sağ: 0px;
kenarlık: düz 0 piksel siyah;
yüzer: sol;
}
.block2 {
genişlik: 200 piksel;
yükseklik: 500;
arka plan: Yeşil;
dolgu: 0 piksel;
dolgu-sağ: 0px;
kenarlık: düz 0 piksel siyah;
Sağa çık;
}
Sarı blok, 500 piksel genişliğinde ve 200 piksel uzunluğunda ilk bloktur.
Yeşil blok, 200 piksel genişliğinde ve 500 piksel uzunluğunda ilk bloktur.
Aşama 3
Blokların sağ taraf / sol taraf hizalaması stiller kullanılarak ayarlanabilir:
.leftim {
yüzer: sol;
kenar boşluğu: 5px 15px 7px 0;
}
.doğrulama {
Sağa çık;
kenar boşluğu: 7px 0 7px 7px;
}
4. Adım
Etiketin yardımıyla, resimlerin dönüşümlü değişimini düzenleyebilirsiniz.
div # döndürücü {konum: göreceli; yükseklik: 150 piksel; sol kenar boşluğu: 15 piksel;}
div # rotator ul li {float: sol; pozisyon: mutlak; liste stili: yok;}
div # döndürücü ul li.show {z-endeksi: 500;}
Döndürücü işlevi () {
$ ('div # döndürücü ul li').css ({opaklık: 0.0});
$ ('div # döndürücü ul li: ilk') css ({opacity: 1.0});
setInterval ('döndür ()', 5000);
}
işlev döndürme () {
var current = ($ ('div # rotator ul li.show')?
var next = ((current.next (). uzunluk)? ((current.next (). hasClass ('show'))? $ ('div # rotator ul li: first'): current.next ()): $ ('div # döndürücü ul li: ilk'));
// var sibs = current.siblings();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var next = $ (sibs [rndNum]);
next.css ({opaklık: 0.0})
.addClass ('göster')
.animate ({opaklık: 1.0}, 1000);
current.animate ({opaklık: 0.0}, 1000)
.removeClass ('göster');
};
$ (belge).ready (işlev () {
Döndürücü ();
});
