Existem dois tipos de layout de site: tabular e em bloco. E enquanto o primeiro é mais conveniente para criar páginas html simples, o último é ideal se você precisar adicionar elementos individuais na forma de blocos.
Instruções
Passo 1
Existem duas técnicas que permitirão que você mesmo desenvolva um design de bloco: incorporando folhas de estilo em cascata em um documento ou conectando-as a partir de um recurso externo. Ambos fornecem o mesmo resultado, portanto, não há diferença fundamental entre eles. No primeiro caso, cole o seguinte código em qualquer lugar do arquivo style.css:
. Bloco 1 {
}
Bloco1 - o nome do bloco, você pode escrever qualquer outro. Entre as chaves, especifique os parâmetros no seguinte formato: nome do atributo> dois-pontos> valor> ponto e vírgula (incluindo colocado antes da chave). Os seguintes elementos são comumente usados:
- largura - largura (500px, 100%, etc.);
- altura - altura (200px, 25%, etc.);
- fundo - cor de fundo (amarelo, vermelho, # 000000);
- preenchimento - preenchimento em torno do conteúdo dentro do bloco (0px, 20%);
- margem - margens externas do bloco (15px, 40%);
- border - frame (border: solid 0px black;);
- float - alinhamento (esquerda, direita);
- raio da borda - arredondamento dos cantos (raio da borda: 10px;).
Passo 2
No segundo uso de CSS, adicione o estilo entre as tags e:
. Bloco 1 {
}
E adicione os parâmetros que você deseja.
etapa 3
Insira o bloco no local desejado do site usando o comando:
Bloco 1
Salve e atualize a página, ela deve aparecer. Lembre-se de que o alinhamento da altura pode variar dependendo de quão cheio está o conteúdo. Por exemplo, se você definiu 300px, mas escreveu apenas uma linha de texto, ele não será exibido por completo. Isso pode ser corrigido, por exemplo, usando uma tabela com os parâmetros necessários, que devem ser colocados dentro do bloco, ou seja, entre tags e. E para que as bordas não fiquem visíveis, insira o atributo
