Tag secara aktif digunakan dalam desain web untuk membuat blok pada halaman html, di mana Anda dapat meletakkan konten apa pun - teks, gambar, tabel, dll.
instruksi
Langkah 1
Saat digunakan, tag akhir diperlukan. Itu dapat digunakan dengan atribut berikut:
- rata - perataan (kiri, tengah, kanan, ratakan), misalnya, Teks;
- kelas - nama kelas (Teks);
- id - nama pengenal tag html;
- gaya - arah gaya;
- judul - keterangan alat.
Langkah 2
Saat menggunakan blok, disarankan untuk menggunakan style sheet. Misalnya, jika Anda ingin membuat dua blok berbeda dengan konten di halaman, kodenya akan terlihat seperti ini:
.blok1 {
lebar: 500 piksel;
tinggi: 200 piksel;
latar belakang: Kuning;
bantalan: 0px;
padding-kanan: 0px;
perbatasan: hitam 0px solid;
mengapung: kiri;
}
.blok2 {
lebar: 200 piksel;
tinggi: 500;
latar belakang: Hijau;
bantalan: 0px;
padding-kanan: 0px;
perbatasan: hitam 0px solid;
mengapung: benar;
}
Blok kuning adalah yang pertama dengan lebar 500px dan panjang 200px.
Blok hijau adalah yang pertama dengan lebar 200px dan panjang 500px.
Langkah 3
Perataan blok sisi kanan / kiri dapat diatur menggunakan gaya:
.kiriimg {
mengapung: kiri;
margin: 5px 15px 7px 0;
}
.rightimg {
mengapung: benar;
margin: 7px 0 7px 7px;
}
Langkah 4
Dengan bantuan tag, Anda dapat mengatur pergantian gambar secara bergantian.
div # rotator {posisi: relatif; tinggi: 150 piksel; margin-kiri: 15px;}
div # rotator ul li {mengambang: kiri; posisi: mutlak; gaya daftar: tidak ada;}
div # rotator ul li.show {z-index: 500;}
fungsi Rotator() {
$ ('div # rotator ul li').css ({opacity: 0.0});
$ ('div # rotator ul li: pertama').css ({opacity: 1.0});
setInterval('putar ()', 5000);
}
fungsi putar () {
var saat ini = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: pertama'));
var next = ((current.next (). length)? ((current.next (). hasClass ('show'))? $ ('div # rotator ul li: first'): current.next ()): $('div # rotator ul li: pertama'));
// var saudara = saat ini.saudara ();
// var rndNum = Math.floor (Math.random() * saudara.length);
// var next = $ (saudara kandung [rndNum]);
next.css ({opacity: 0.0})
.addClass ('tampilkan')
.animate ({opacity: 1.0}, 1000);
current.animate ({opacity: 0.0}, 1000)
.removeClass('tampilkan');
};
$ (dokumen).ready (fungsi () {
theRotator();
});
