Publicado em 24 de ago.

Inserir uma linha no html

#desenvolvimento-frontend

Boa noite colegas aqui do forúm...

Gostaria de tirar uma dúvida com vocês.

Gostaria de criar uma linha tipo a desse site www.maispatos.com

A linha esta no rodapé do site citado, é a linha fininha.

Gostaria de inserir um linha tipo essa, mais acredito que tenho que também estilizar com CSS certo.

Então como fazer tal feito?

Obrigado

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Diéssica· 25 de ago.

No HTML, existe o elemento** <hr>** (*horizontal rule*), uma linha horizontal para a organização de tópicos e/ou seções de conteúdo. Os desenvolvedores costumam fazer muitas coisas legais com esse elemento, como pode ver nesse artigo do [HTML5 Doctor](http://html5doctor.com/small-hr-element/) ([veja esta imagem](http://html5doctor.com/wp-content/uploads/2010/03/hr-separator.png) do **<hr> **estilizado com CSS).

<h1>Seção 1</h1>
<p>Conteúdo</p>
<hr>
<h2>Seção 2>
<p>Conteúdo</p>

Resultado :seta http://codepen.io/anon/pen/rcgox

Porém, o mais comum é o uso da propriedade border (border-bottom, mais especificamente), declarado a um elemento HTML.

<div id="topico">Lorem Ipsum</div>
<div id="topico2">Lorem Ipsum</div>

Supondo que queiramos separar esses dois elementos div por uma linha horizontal, a modificação pode ser feita utilizando apenas CSS:

#topico {
border-bottom: solid 1px #000;
}

Resultado :seta: http://cdpn.io/ivuth

No caso do site, foi feito com um elemento div:

Customizado com CSS:

height: 1px;
clear: both;
overflow: hidden;
background-color: #3D3D3D;

O que não está errado, obviamente, só não é uma solução muito inteligente. Muito código para uma linha horizontal :P

Referências: hr (W3C)

zcommand· 26 de ago.

Para fazer em css, vc deve usar o atributo "border"

exemplo: border-bottom ou border-top dependendo onde vc quer colocar a linha, ai vc colocar a espessura da linha com px, tipo 1px e ai uma cor solida para destacar. fica mais o menos assim (border-bottom: 1px solid #ccc;).

Tem também os estilos de bordas que vc pode usar com o border-style, (dotted = pontilhada / dashed = tracinhos / double = borda dupla e tem mais algumas, mas como eu não utilizo muito eu não lembro o nome. kkkkkk.