Dica da semana:

Siga nosso blog e receba direto do seu email Mais Códigos, antes de todos.

Artigo do Dia

TOP 5 Códigos Livres - Script Brasil

Linha de Código - Artigos

Blog Do Raí

Novidades de Criarweb.com

::Tutoriais Photoshop::

Photoshopus | Tutoriais Photoshop

Free, design, art

TrabalhosFeitos.com RSS Feed

terça-feira, 11 de junho de 2013

Barras de navegação simples com CSS

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.

<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>
 
Fonte: CodigoFonte 

# COMPARTILHE

EFAS DIGITAL

Em 2008 entrei no meu primeiro curso de montagem e manutenção de micro e rede, tirei um enorme conhecimento e em 2010 comecei a me dedicar ao webdesginer aprendi html e css... A profundei meus conhecimentos em php, delphi, java-script, softwares e outros. Em 2011 criei meu primeiro blog "Baixaki dos DJs" hoje já com mais de 680 mil visitas e estou com vários outros novos blogs. Trabalho com freelance em área de informática e web.

0 comentários:

Postar um comentário

Siga nosso blog e faça seu comentário !

Observação: somente um membro deste blog pode postar um comentário.

Tradutor

Todos os direitos reservados á Mais Códigos 2013 © Copyright - Designer: