Teg digunakan secara aktif dalam reka bentuk web untuk membuat blok di halaman html, di mana anda boleh meletakkan kandungan apa pun - teks, gambar, jadual, dll.
Arahan
Langkah 1
Apabila digunakan, teg akhir diperlukan. Ia dapat digunakan dengan atribut berikut:
- align - alignment (kiri, tengah, kanan, membenarkan), contohnya, Teks;
- kelas - nama kelas (Teks);
- id - nama pengenal teg html;
- gaya - arah gaya;
- tajuk - petua alat.
Langkah 2
Semasa menggunakan blok, disarankan untuk menggunakan helaian gaya. Contohnya, jika anda ingin membuat dua blok yang berbeza dengan kandungan pada halaman, maka kodnya akan kelihatan seperti ini:
.sekat1 {
lebar: 500px;
tinggi: 200px;
latar belakang: Kuning;
pembalut: 0px;
padding-right: 0px;
sempadan: hitam 0px padat;
terapung: kiri;
}
.sekat2 {
lebar: 200px;
tinggi: 500;
latar belakang: Hijau;
pembalut: 0px;
padding-right: 0px;
sempadan: hitam pekat 0px;
terapung: betul;
}
Blok kuning adalah yang pertama dengan lebar 500px dan panjang 200px.
Blok hijau adalah yang pertama dengan lebar 200px dan panjang 500px.
Langkah 3
Penjajaran sisi kanan / kiri blok dapat diatur menggunakan gaya:
.leftimg {
terapung: kiri;
margin: 5px 15px 7px 0;
}
.rightimg {
terapung: betul;
margin: 7px 0 7px 7px;
}
Langkah 4
Dengan bantuan tag, anda boleh mengatur pertukaran gambar secara bergantian.
div # rotator {kedudukan: relatif; tinggi: 150px; margin-kiri: 15 piksel;}
div # rotator ul li {float: kiri; kedudukan: mutlak; gaya senarai: tiada;}
div # rotator ul li.show {z-index: 500;}
fungsi theRotator () {
$ ('div # rotator ul li'). css ({opacity: 0.0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('putar ()', 5000);
}
fungsi putar () {
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: pertama'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var next = $ (saudara [rndNum]);
next.css ({kelegapan: 0.0})
.addClass ('tunjukkan')
.animate ({kelegapan: 1.0}, 1000);
current.animate ({kelegapan: 0.0}, 1000)
.removeClass ('tunjuk');
};
$ (dokumen). sudah (fungsi () {
theRotator ();
});
