Tag jest aktywnie wykorzystywany w projektowaniu stron internetowych do tworzenia bloków na stronach html, wewnątrz których można umieszczać treści o dowolnym charakterze - tekst, obrazy, tabele itp.
Instrukcje
Krok 1
Gdy jest używany, wymagany jest znacznik końcowy. Może być używany z następującymi atrybutami:
- align - wyrównanie (do lewej, do środka, do prawej, wyjustuj), np. Tekst;
- klasa - nazwa klasy (Tekst);
- id - nazwa identyfikatora tagu html;
- styl - kierunek stylu;
- tytuł - podpowiedź.
Krok 2
Podczas korzystania z bloków zaleca się użycie arkusza stylów. Na przykład, jeśli chcesz utworzyć dwa różne bloki z zawartością na stronie, kod będzie wyglądał mniej więcej tak:
.blok1 {
szerokość: 500px;
wysokość: 200px;
tło: Żółty;
dopełnienie: 0px;
dopełnienie-prawo: 0px;
obramowanie: stałe 0px czarne;
pływak: lewy;
}
.blok2 {
szerokość: 200px;
wysokość: 500;
tło: zielony;
dopełnienie: 0px;
dopełnienie-prawo: 0px;
obramowanie: stałe 0px czarne;
pływak: w prawo;
}
Żółty blok to pierwszy o szerokości 500px i długości 200px.
Zielony blok to pierwszy o szerokości 200px i długości 500px.
Krok 3
Wyrównanie bloków prawo/lewo można ustawić za pomocą stylów:
.pozostały {
pływak: lewy;
margines: 5px 15px 7px 0;
}
.prawo {
pływak: w prawo;
margines: 7px 0 7px 7px;
}
Krok 4
Za pomocą tagu możesz organizować naprzemienną zmianę zdjęć.
div # rotator {pozycja: względna; wysokość: 150px; margines lewy: 15px;}
div # rotator ul li {float: left; pozycja: bezwzględna; styl listy: brak;}
div # rotator ul li.show {z-index: 500;}
funkcjaRotatora () {
$ ('div # rotator ul li').css ({przezroczystość: 0,0});
$ ('div # rotator ul li: pierwszy').css ({przezroczystość: 1.0});
setInterval ('obróć ()', 5000);
}
funkcja obracania () {
var current = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: pierwszy'));
var next = ((current.next (). length)? ((current.next (). hasClass ('show'))? $ ('div # rotator ul li: first'): current.next()): $ ('div # rotator ul li: pierwszy'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var next = $ (sibs [rndNum]);
next.css ({przezroczystość: 0.0})
.addClass ('pokaż')
.animate ({przezroczystość: 1,0}, 1000);
current.animate ({przezroczystość: 0.0}, 1000)
.removeClass („pokaż”);
};
$ (dokument).gotowy (funkcja () {
Rotator ();
});
