Bgames
Olá visitante! Seja bem vindo ao nosso fórum!

Para você ter total acesso ao nosso fórum é preciso que você se cadastre.

Cadastre-se Aqui!


PARA VER LINKS E IMAGENS É PRECISO SE REGISTRAR!

[Tutorial] Menu HTML com icones

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[Tutorial] Menu HTML com icones

Mensagem por windownsserversbr em Sex 17 Abr 2015 - 11:30

Olá pessoal 
eu trouxe para vocês um menu com ícones muito bom eu estou usando em um Página minha resolvi postar para vocês 

Index.html

Código:
<html>
<head>
   <title>Wind Menu com icones</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="nav">
   <ul>
      <li><span class="home" ></span><a href="#">Home</a></li>
      <li><span class="service" ></span><a href="#">Serviços</a></li>
      <li><span class="sobre" ></span><a href="#">Sobre Nós</a></li>
      <li><span class="portfolio" ></span><a href="#">Portfolio</a></li>
      <li><span class="eventos" ></span><a href="#">Eventos</a></li>
      <li><span class="contato" ></span><a href="#">Contato</a></li>
   </ul>
</div>

</body>
</html>


Style.css

Código:
body { background: #222; }

/*=== windownsservers.jimdo.com menu com icones ===*/
#nav { width: 960px; background: #fff; margin: 180px; float: left; border-radius: 5px; }
#nav ul { margin: 0; padding: 0; list-style: none; width: 100%; float: left; }
#nav ul li { float: left; font: 16px arial; border-right: 1px solid #eee; }
#nav ul li a { color: #888; text-decoration: none; padding: 20px; display: block; }
#nav ul li:hover { background: #eee; }
#nav ul li .home { background: #049 url(image/01-home.png) no-repeat center ; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px;  }
#nav ul li .service { background: #489 url(image/02-serviços.png) no-repeat center ; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px;  }
#nav ul li .sobre { background: #874 url(image/03-sobre.png) no-repeat center ; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px;  }
#nav ul li .portfolio { background: #987 url(image/04-portfolio.png) no-repeat center ; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px;  }
#nav ul li .eventos { background: #076 url(image/05-evento.png) no-repeat center ; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px;  }
#nav ul li .contato { background: #473 url(image/06-contato.png) no-repeat center ; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px;  }


Icones 

Home [Você precisa estar registrado e conectado para ver esta imagem.]
Serviços [Você precisa estar registrado e conectado para ver esta imagem.]
sobre [Você precisa estar registrado e conectado para ver esta imagem.]
portfolio [Você precisa estar registrado e conectado para ver esta imagem.]
evento [Você precisa estar registrado e conectado para ver esta imagem.]
contato [Você precisa estar registrado e conectado para ver esta imagem.]

windownsserversbr


Mensagens : 233
Pontos : 739

Ver perfil do usuário http://windownsservers.jimdo.com

Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum