Início
#1![[CSS] Barras de navegação simples com CSS Empty](https://2img.net/i/empty.gif)
[CSS] Barras de navegação simples com CSS Qua Dez 14, 2011 8:03 pm
Supero
Novato
Ao desenvolver uma página é necessário na maior parte dos caso do
desenvolvimento de uma área de navegação para que o visitante possa
acessar rapidamente as páginas do site.
Neste código é apresentada uma barras de navegação, na versão vertical e horizontal.
A barra é bem simples e bonita e que pode ser personalizada facilmente conforme o layout.
desenvolvimento de uma área de navegação para que o visitante possa
acessar rapidamente as páginas do site.
Neste código é apresentada uma barras de navegação, na versão vertical e horizontal.
A barra é bem simples e bonita e que pode ser personalizada facilmente conforme o layout.
- Código:
<html>
<head>
<title>Barras de Navegação CSS</title>
.::Barras na Horizontal::.
<style type="text/css">
.barNav a {
font: 12px Arial, Verdana,Helvetica,sans-serif;
color: #FFFFFF;
text-decoration: none;
background: #6495ED;
text-align: center;
padding: 1px 5px;
margin-right: -1px;
border: 0px solid #000000;
}
.barNav a:hover {
color: #666666;
background: #FCFCFC;
border: 1px solid #666666;
}
-->
</style>
<body>
<p class="barNav">
<a href="seu_link.html" >Home</a>
<a href="seu_link.html">Jogos</a>
<a href="seu_link.html">Mural de Recados</a>
<a href="seu_link.html">Fotos</a>
<a href="seu_link.html">Vídeos</a>
<a href="seu_link.html">Eventos</a>
<a href="seu_link.html">Contato</a>
</p>
.::Barras na Vertical::.
<style type="text/css">
.barNav a {
font: 12px Arial, Verdana,Helvetica,sans-serif;
color: #FFFFFF;
text-decoration: none;
background: #6495ED;
text-align: center;
padding: 1px 5px;
margin-right: -1px;
border: 0px solid #000000;
}
</style>
<p class="barNav">
<a href="seu_link.html" >Home</a> <br>
<a href="seu_link.html">Jogos</a> <br>
<a href="seu_link.html">Mural de Recados</a> <br>
<a href="seu_link.html">Fotos</a> <br>
<a href="seu_link.html">Vídeos</a> <br>
<a href="seu_link.html">Eventos</a> <br>
<a href="seu_link.html">Contato</a> <br>
</p>
</body>
</html>