De tag wordt actief gebruikt in webdesign om blokken op html-pagina's te maken, waarin u inhoud van welke aard dan ook kunt plaatsen - tekst, afbeeldingen, tabellen, enz.
instructies:
Stap 1
Bij gebruik is een eindtag vereist. Het kan worden gebruikt met de volgende attributen:
- uitlijnen - uitlijnen (links, centreren, rechts, uitvullen), bijvoorbeeld Tekst;
- klasse - klassenaam (tekst);
- id - de naam van de html-tag-ID;
- stijl - stijlrichting;
- titel - knopinfo.
Stap 2
Bij het gebruik van blokken is het aan te raden om een stylesheet te gebruiken. Als u bijvoorbeeld twee verschillende blokken met inhoud op een pagina wilt maken, ziet de code er ongeveer zo uit:
.blok1 {
breedte: 500px;
hoogte: 200px;
achtergrond: Geel;
opvulling: 0px;
opvulling-rechts: 0px;
rand: effen 0px zwart;
zweven: links;
}
.blok2 {
breedte: 200px;
hoogte: 500;
achtergrond: Groen;
opvulling: 0px;
opvulling-rechts: 0px;
rand: effen 0px zwart;
drijven: rechts;
}
Het gele blok is het eerste met een breedte van 500px en een lengte van 200px.
Het groene blok is het eerste met een breedte van 200px en een lengte van 500px.
Stap 3
Rechts/links uitlijning van blokken kan worden ingesteld met stijlen:
.leftimg {
zweven: links;
marge: 5px 15px 7px 0;
}
.rightimg {
drijven: rechts;
marge: 7px 0 7px 7px;
}
Stap 4
Met behulp van de tag kunt u de afwisselende wisseling van afbeeldingen organiseren.
div # rotator {positie: relatief; hoogte: 150px; marge-links: 15px;}
div # rotator ul li {float: left; positie: absoluut; lijststijl: geen;}
div # rotator ul li.show {z-index: 500;}
functie theRotator () {
$ ('div # rotator ul li') css ({dekking: 0.0});
$ ('div # rotator ul li: eerste') css ({opacity: 1.0});
setInterval ('roteren ()', 5000);
}
functie roteren () {
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: eerste'));
// var broers en zussen = huidige.broers en zussen ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var volgende = $ (broers en zussen [rndNum]);
volgende.css ({dekking: 0.0})
.addClass ('toon')
.animeren ({dekking: 1.0}, 1000);
huidige.animate ({dekking: 0.0}, 1000)
.removeClass ('toon');
};
$ (document).klaar (functie () {
deRotator ();
});
