Inserir uma linha no html

[tcjinformatica 0]

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

[Diéssica 140]

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 (veja esta imagem 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:

<div class="line_1"></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 7]

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.