×
Loading ...

Como colocar barra ou separadores em um site

Atualizado em 19 julho, 2017

Há várias formas de colocar barras ou separadores em sites. Uma delas é construí-los diretamente no código HTML, o que é bastante fácil, dependendo da sua capacidade em editar o HTML dos seus sites. Com separadores, fica muito fácil organizar o conteúdo de forma clara, o que irá melhorar a legibilidade do seu site.

Instruções

Acrescente separadores ao seu site (internetseite image by FX Berlin from Fotolia.com)

    Passos

  1. Abra o código-fonte da página que você deseja editar. Se seu site funciona através de uma interface de usuário (como Blogger ou WordPress, por exemplo), apenas abra a aba "Código" ou "HTML" quando estiver editando uma postagem.

    Loading...
  2. Insira "


    " (sem as aspas) onde você deseja inserir uma barra ou divisor.

  3. Salve a página e verifique se a barra apareceu.

  4. Mude a aparência do "


    " facilmente para a forma que você quiser acessando o código da folha de estilos do seu site, que aparece entre as tags ">", na seção "" das suas páginas; ou, alternativamente, em um arquivo que termina com a extensão CSS.

  5. Insira este trecho de código no fim da folha de estilos:

    hr { width:60% GO height:10px GO background-color:gray GO border:1px dotted green GO }

    Obviamente, estes valores podem ser alterados. Apenas mantenha a sintaxe da mesma forma e altere as cores e medidas de acordo com seu gosto. As medidas podem ser em pixels (px) ou porcentagem.

    Na opção "border" (borda), as opções, além de "dotted" (pontilhado), são: "solid" (borda comum), "dashed" (tracejada), "ridge" (borda em ressalto), "groove" (borda entalhada), "outset" (alto relevo) e "inset" (baixo relevo).

  6. Faça um separador com qualquer gravura que quiser inserindo o código abaixo no fim da folha de estilos ao invés do código anterior:

    hr { width:400px GO height:5px GO background-image:url('endereco-da-imagem.jpg') GO }

    Troque "endereco-da-imagem.jpg" pelo endereço da sua imagem na web. Você também terá que ajustar as dimensões de acordo com o tamanho da imagem. Se tiver 200 px de largura por 20 px de altura, coloque "200 px" como valor em "width" (largura) e 20 px como valor em "height" (altura).

Loading...

O que você precisa

  • Editor HTML ou editor de texto

Referências

Loading ...
Loading ...