Como colocar barra ou separadores em um site

Escrito por michael dance | Traduzido por vinícius albuquerque
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como colocar barra ou separadores em um site
Acrescente separadores ao seu site (internetseite image by FX Berlin from Fotolia.com)

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.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

O que você precisa?

  • Editor HTML ou editor de texto

Lista completaMinimizar

Instruções

    Passos

  1. 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.

  2. 2

    Insira "<hr />" (sem as aspas) onde você deseja inserir uma barra ou divisor.

  3. 3

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

  4. 4

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

  5. 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. 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).

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível