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