Usando CSS3 para criar um esboço do documento é útil quando uma página contém uma grande quantidade de material e você quer que o usuário navegar facilmente. O contorno depende das várias marcas que prestam. O actual método de criação de um esboço do documento é usar o

através

Tag.

Esta abordagem funciona muito bem quando o material vem da mesma página ou você tem controle sobre a formatação do conteúdo. Ela não funciona tão bem quando o conteúdo vem de outro local, razão pela qual os grupos de padrões teve para chegar a uma maneira inteiramente nova de fazer as coisas.

O procedimento a seguir demonstra uma técnica para adicionar um esboço para uma página que já contém um menu. Você usa a navegação como um ponto de partida.

1. Abra o arquivo navigation.html e adicione o seguinte código ao final do seção (após o menu existente).

2. Ponto principal 1
3. Subtítulo 1
4. Subtítulo dois
5. Ponto principal 2
6. Subtítulo 3
7. Subtítulo 4



Ponto principal 1

material introdutório

Subtítulo 1

Artigo

Subtítulo dois

Artigo

Ponto principal 2

material introdutório

Subtítulo 3

Artigo

Subtítulo 4

Artigo

As entradas consistem em um esboço de documento e o conteúdo associado. O esquema segue especificamente o

e

objetos neste exemplo. Existem métodos para gerar esse tipo de conteúdo automaticamente, mas todas elas requerem codificação

Este é um caso onde o uso de CSS implica alguma codificação manual que você não teria de realizar ao utilizar outras técnicas, tais como a inclusão de javascript. No entanto, a vantagem é que o exemplo vai funcionar bem com qualquer navegador que suporte CSS.

8. 
   
   
   

   Salve o arquivo HTML.

9. Abra Navigation.CSS e escreva os seguintes estilos no final do arquivo.

   #DocOutline {font-family: Arial, Helvetica, sans-serif-fonte de tamanho: 14 px; largura: 145px; altura: 800 px;} # DocOutline ul {margem de fundo: 20 p; lista-modelo: nenhuma; margem-esquerda: -40px;} # DocOutline ul ul {margem-esquerda: -20px;} # DocContent {margem superior: -800px; margem-esquerda: 150 pixels;}

   O foco principal é sobre os tópicos do documento onde você precisa fornecer links formatado para o conteúdo encontrado no restante da página. Observe que o esquema é definido para uma altura específica. A razão para esta configuração é para tornar mais fácil para posicionar o conteúdo do documento uma vez que os links são exibidos.

   O exemplo define a propriedade estilo list-style #DocOutline ul a nenhum. Você poderia facilmente usar números, letras ou qualquer outro índice delineamento você preferir.

   Esta lista meia automaticamente travessão da distância dos elementos de menu individuais criados anteriormente. A fim de colocar os links no lado esquerdo da página, você deve reverter o recuo da lista, definindo margem esquerda para -40px, que é a metade da largura 80px dos elementos individuais do menu.

   Video: Learn Css3 in Arabic #11 - 2D Transform - Scale

   Cada nível vai exigir alguma quantidade adicional de recuo de modo que o usuário pode ver os níveis relativos de cada entrada. O #DocOutline ul ul muda o recuo para as posições de segundo nível. Se você tivesse um terceiro nível de títulos, você criar um estilo ul ul #DocOutline ul para formatá-lo.

   O conteúdo do documento terá início após o esboço do documento, a menos que uma de duas coisas acontece. Primeiro, você pode usar colunas reais. No entanto, esta funcionalidade requer CSS3. Em segundo lugar, você pode usar pseudo-colunas. Você define o valor da propriedade margin-top igual à altura do contorno documento.

   A técnica mostrada neste exemplo irá funcionar com qualquer browser que suporte totalmente CSS. Observe que você também deve definir a margem esquerda para um valor que é igual a largura do contorno documento (além de alguns pixels para espaçamento.

10. Salve o arquivo CSS.

11. Atualizar o exemplo de navegação.

    Você ver o contorno de documentos e conteúdo associado. Este esquema funciona realmente - você pode clicar nos links para ir para os vários cabeçalhos apresentados no esquema.

    

    Video: Curso: Bases de HTML y CSS - 2. Estructura básica de un documento HTML