La balise est activement utilisée dans la conception Web pour créer des blocs sur des pages html, à l'intérieur desquels vous pouvez mettre du contenu de toute nature - texte, images, tableaux, etc.
Instructions
Étape 1
Lorsqu'elle est utilisée, une balise de fin est requise. Il peut être utilisé avec les attributs suivants:
- align - alignement (gauche, centre, droite, justification), par exemple, Texte;
- classe - nom de classe (texte);
- id - le nom de l'identifiant de la balise html;
- style - direction du style;
- titre - infobulle.
Étape 2
Lors de l'utilisation de blocs, il est conseillé d'utiliser une feuille de style. Par exemple, si vous souhaitez créer deux blocs différents avec du contenu sur une page, le code ressemblera à ceci:
.block1 {
largeur: 500px;
hauteur: 200px;
fond: jaune;
remplissage: 0px;
remplissage-droit: 0px;
bordure: solide 0px noir;
flotteur: gauche;
}
.block2 {
largeur: 200px;
hauteur: 500;
fond: vert;
remplissage: 0px;
remplissage-droit: 0px;
bordure: solide 0px noir;
Flotter à droite;
}
Le bloc jaune est le premier avec une largeur de 500px et une longueur de 200px.
Le bloc vert est le premier avec une largeur de 200px et une longueur de 500px.
Étape 3
L'alignement des blocs côté droit/côté gauche peut être défini à l'aide de styles:
.leftimg {
flotteur: gauche;
marge: 5px 15px 7px 0;
}
.rightimg {
Flotter à droite;
marge: 7px 0 7px 7px;
}
Étape 4
Avec l'aide de la balise, vous pouvez organiser le changement d'images en alternance.
div # rotateur {position: relative; hauteur: 150px; marge gauche: 15px;}
div # rotateur ul li {flotteur: gauche; position: absolue; style de liste: aucun;}
div # rotateur ul li.show {z-index: 500;}
fonction leRotator () {
$ ('div # rotateur ul li').css ({opacity: 0.0});
$ ('div # rotateur ul li: first').css ({opacity: 1.0});
setInterval ('rotation ()', 5000);
}
fonction rotation () {
var current = ($ ('div # rotateur ul li.show')? $ ('div # rotateur ul li.show'): $ ('div # rotateur ul li: first'));
var next = ((current.next (). longueur)? ((current.next (). hasClass ('show')))? $ ('div # rotateur ul li: first'): current.next ()): $ ('div # rotateur ul li: first'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var suivant = $ (sibs [rndNum]);
next.css ({opacité: 0.0})
.addClass ('afficher')
.anime ({opacité: 1.0}, 1000);
current.animate ({opacity: 0.0}, 1000)
.removeClass ('afficher');
};
$ (document).ready (fonction () {
leRotator ();
});
