Das Tag wird im Webdesign aktiv verwendet, um Blöcke auf HTML-Seiten zu erstellen, in die Sie Inhalte jeder Art einfügen können - Text, Bilder, Tabellen usw.
Anweisungen
Schritt 1
Bei Verwendung ist ein End-Tag erforderlich. Es kann mit den folgenden Attributen verwendet werden:
- ausrichten - Ausrichtung (links, zentriert, rechts, ausrichten), zum Beispiel Text;
- Klasse - Klassenname (Text);
- id - der Name der HTML-Tag-Kennung;
- Stil - Stilrichtung;
- Titel - Kurzinfo.
Schritt 2
Bei der Verwendung von Blöcken empfiehlt es sich, ein Stylesheet zu verwenden. Wenn Sie beispielsweise zwei verschiedene Blöcke mit Inhalten auf einer Seite erstellen möchten, sieht der Code etwa so aus:
. Block 1 {
Breite: 500px;
Höhe: 200px;
Hintergrund: Gelb;
Füllung: 0px;
padding-rechts: 0px;
Rahmen: durchgehend 0px schwarz;
Schwimmer: links;
}
.block2 {
Breite: 200px;
Höhe: 500;
Hintergrund: Grün;
Füllung: 0px;
padding-rechts: 0px;
Rahmen: durchgehend 0px schwarz;
schweben rechts;
}
Der gelbe Block ist der erste mit einer Breite von 500px und einer Länge von 200px.
Der grüne Block ist der erste mit einer Breite von 200px und einer Länge von 500px.
Schritt 3
Die rechte / linke Ausrichtung von Blöcken kann mithilfe von Stilen festgelegt werden:
.leftimg {
Schwimmer: links;
Rand: 5px 15px 7px 0;
}
.rechtsimg {
schweben rechts;
Rand: 7px 0 7px 7px;
}
Schritt 4
Mit Hilfe des Tags können Sie den abwechselnden Wechsel von Bildern organisieren.
div # rotator {position: relativ; Höhe: 150px; Rand-links: 15px;}
div # rotator ul li {float: left; Position: absolut; Listenstil: keiner;}
div # rotator ul li.show {z-index: 500;}
Funktion theRotator () {
$ ('div # rotator ul li').css ({opacity: 0.0});
$ ('div # rotator ul li: first').css ({opacity: 1.0});
setInterval ('rotieren()', 5000);
}
Funktion drehen () {
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 ({opacity: 0.0})
.addClass ('zeigen')
.animieren ({opacity: 1.0}, 1000);
aktuell.animieren ({opacity: 0.0}, 1000)
.removeClass ('zeigen');
};
$ (Dokument).bereit (Funktion () {
theRotator ();
});
