Latest web development tutorials

layout de HTML

layout de página para melhorar a aparência do site é muito importante.

Por favor, projetar cuidadosamente o layout da página.

Exemplos

exemplos on-line

layout da página usando o elemento <div>
Como usar o elemento <div> para layout.

layout de página Use elemento <table>
Como usar o elemento <table> para layout.

layout do site

A maioria dos sites conteúdo em uma pluralidade de colunas (como uma revista ou jornal que).

A maioria dos sites pode usar os <div> ou <table> elementos para criar várias colunas. CSS é usado para posicionar elementos, ou criar um fundo e uma aparência colorida da página.

lâmpada Embora possamos utilizar a marca de tabela HTML para projetar um layout bonito, mas a marca de tabela não é recomendado para uso como uma ferramenta de layout - não uma ferramentas de layout tabela.

Layout HTML - Usando elemento <div>

elemento div é um elemento nível de bloco usado para agrupar elementos HTML.

O exemplo a seguir usa cinco elementos div para criar layout de várias colunas:

Exemplos

<! DOCTYPE html> <Html> <Head> <Meta charset = "utf-8"> <Title> Este tutorial (w3big.com) </ title> </ Head> <Body> <Div id = "container" style = "width: 500px"> <Div id = "header" style = "background-color: # FFA500;"> <H1 style = "margin-bottom: 0 ;"> O principal título da página </ h1> </ div> <Div id = "menu" style = "background-color: # FFD700; height: 200px; width: 100px; float: left;"> <B> Menu </ b> <br> HTML <br> CSS <br> JavaScript </ div> <Div id = "content" style = "background-color: #EEEEEE ; height: 200px; width: 400px; float: left;"> texto aqui </ div> <Div id = "footer" style = "background-color: # FFA500; clear: both; text-align: center;"> Direitos de autor © w3big.com </ div> </ Div> </ Body> </ Html>

tente »

O código HTML acima produz os seguintes resultados:

layout de HTML - usando tabelas

Use HTML <table> tag é criar um layout de uma forma simples.

A maioria dos sites pode usar os <div> ou <table> elementos para criar várias colunas. CSS é usado para posicionar elementos, ou criar um fundo e uma aparência colorida da página.

lâmpada Mesmo que você pode usar tabelas HTML para criar um layout agradável, mas o propósito é apresentar os dados tabulares tabela de projeto - não ferramenta de layout mesa!

O exemplo a seguir utiliza três filas de duas tabelas - a primeira ea última linha usa atributo colspan para abranger dois:

Exemplos

<! DOCTYPE html> <Html> <Head> <Meta charset = "utf-8"> <Title> Este tutorial (w3big.com) </ title> </ Head> <Body> <Table largura = "500" border = "0"> <Tr> <td colspan = "2" style = "background-color: # FFA500;"> <H1> principal título da página </ h1> </ Td> </ Tr> <Tr> <td style = "background-color: # FFD700; width: 100px;"> <B> Menu </ b> <br> HTML <br> CSS <br> JavaScript </ td> <td style = "background-color: #eeeeee ; height: 200px; width: 400px;"> texto aqui </ td> </ Tr> <Tr> <td colspan = "2" style = "background-color: # FFA500; text-align: center;"> Direitos de autor © w3big.com </ td> </ Tr> </ Table> </ Body> </ Html>

tente »

O código HTML acima produz os seguintes resultados:


HTML Layout - Dicas úteis

Dica: os maiores benefícios do uso de CSS é que, se o código CSS é armazenada em uma folha de estilo externa, então o site será mais fácil de manter.Editando um único arquivo, você pode alterar o layout de todas as páginas. Para saber mais sobre CSS, visite nosso tutorial CSS .

Ajuda: Devido a criar um layout avançado é muito demorado, usando um modelo é uma opção rápida.Através de um motor de busca você pode encontrar um monte de modelos de sites gratuitos (Você pode usar estes layout do site pré-construídos, e otimizá-los).

etiquetas HTML Layout

标签描述
<div> 定义文档区块，块级(block-level)
<span> 定义 span，用来组合文档中的行内元素。