A tag é ativamente usada em web design para criar blocos em páginas html, dentro das quais você pode colocar conteúdo de qualquer natureza - texto, imagens, tabelas, etc.
Instruções
Passo 1
Quando usado, uma tag final é necessária. Ele pode ser usado com os seguintes atributos:
- alinhar - alinhamento (esquerda, centro, direita, justificar), por exemplo, Texto;
- classe - nome da classe (texto);
- id - o nome do identificador da tag html;
- estilo - direção do estilo;
- título - dica de ferramenta.
Passo 2
Ao usar blocos, é aconselhável usar uma folha de estilo. Por exemplo, se você deseja criar dois blocos diferentes com conteúdo em uma página, o código será semelhante a este:
. Bloco 1 {
largura: 500px;
altura: 200px;
fundo: amarelo;
preenchimento: 0px;
padding-right: 0px;
borda: sólido 0px preto;
flutuar: esquerda;
}
.block2 {
largura: 200px;
altura: 500;
fundo: Verde;
preenchimento: 0px;
padding-right: 0px;
borda: sólido 0px preto;
flutuar: certo;
}
O bloco amarelo é o primeiro com 500px de largura e 200px de comprimento.
O bloco verde é o primeiro com largura de 200 px e comprimento de 500 px.
etapa 3
O alinhamento do lado direito / esquerdo dos blocos pode ser definido usando os estilos:
.leftimg {
flutuar: esquerda;
margem: 5px 15px 7px 0;
}
.rightimg {
flutuar: certo;
margem: 7px 0 7px 7px;
}
Passo 4
Com a ajuda da tag, você pode organizar a troca alternada de fotos.
div # rotator {posição: relativa; altura: 150px; margem esquerda: 15px;}
div # rotator ul li {float: left; posição: absoluta; estilo de lista: nenhum;}
div # rotator ul li.show {z-index: 500;}
function theRotator () {
$ ('div # rotator ul li'). css ({opacidade: 0,0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('rotate ()', 5000);
}
function rotate () {
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 ({opacidade: 0,0})
.addClass ('show')
.animado ({opacidade: 1,0}, 1000);
current.animate ({opacity: 0.0}, 1000)
.removeClass ('mostrar');
};
$ (document).ready (function () {
theRotator ();
});
