La etiqueta se utiliza activamente en el diseño web para crear bloques en páginas html, dentro de los cuales puede colocar contenido de cualquier naturaleza: texto, imágenes, tablas, etc.
Instrucciones
Paso 1
Cuando se usa, se requiere una etiqueta de cierre. Se puede utilizar con los siguientes atributos:
- alinear - alineación (izquierda, centro, derecha, justificar), por ejemplo, Texto;
- clase - nombre de la clase (texto);
- id - el nombre del identificador de etiqueta html;
- estilo - dirección de estilo;
- título - descripción emergente.
Paso 2
Al utilizar bloques, es recomendable utilizar una hoja de estilo. Por ejemplo, si desea crear dos bloques diferentes con contenido en una página, entonces el código se verá así:
.block1 {
ancho: 500px;
altura: 200px;
fondo: amarillo;
relleno: 0px;
padding-right: 0px;
borde: negro sólido 0px;
flotador izquierdo;
}
.block2 {
ancho: 200px;
altura: 500;
fondo: verde;
relleno: 0px;
padding-right: 0px;
borde: negro sólido 0px;
flotar derecho;
}
El bloque amarillo es el primero con un ancho de 500px y una longitud de 200px.
El bloque verde es el primero con un ancho de 200px y una longitud de 500px.
Paso 3
La alineación de bloques del lado derecho / izquierdo se puede establecer usando estilos:
.leftimg {
flotador izquierdo;
margen: 5px 15px 7px 0;
}
.rightimg {
flotar derecho;
margen: 7px 0 7px 7px;
}
Paso 4
Con la ayuda de la etiqueta, puede organizar el cambio alterno de imágenes.
div # rotator {posición: relativa; altura: 150px; margen izquierdo: 15px;}
div # rotador ul li {flotar: izquierda; posición: absoluta; estilo de lista: ninguno;}
div # rotator ul li.show {índice z: 500;}
function theRotator () {
$ ('div # rotator ul li'). css ({opacidad: 0.0});
$ ('div # rotator ul li: primero'). css ({opacidad: 1.0});
setInterval ('rotar ()', 5000);
}
function rotate () {
var current = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: primero'));
var next = ((current.next (). length)? ((current.next (). hasClass ('show'))? $ ('div # rotator ul li: first'): current.next ()): $ ('div # rotator ul li: primero'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var siguiente = $ (sibs [rndNum]);
next.css ({opacidad: 0.0})
.addClass ('mostrar')
.animate ({opacidad: 1.0}, 1000);
current.animate ({opacidad: 0.0}, 1000)
.removeClass ('mostrar');
};
$ (documento).ready (function () {
theRotator ();
});
