Linux tutoriais, Windows tutoriais, Wordpress tutoriais
Página inicialW3.CSSMenu centralizado com o W3.css Framework
Menu centralizado com Framework w3.css

Menu centralizado com o W3.css Framework

Quero te mostrar como eu faço um menu centralizado com o W3.css Framework. Copie o código e você terá um menu igual ao da imagem acima.

Meu Framework preferido para construir sites é o w3.css. Vou trazer muitas dicas e tutoriais sobre este Framework aqui no blog. Você verá o quanto o W3.css é especial.


Código de como fazer o menu centralizado com o W3.css Framework.

<!DOCTYPE html>
<html lang="pt-br">
  <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <title>Menu centralizado com w3.css</title>
 </head>

 <body class="w3-black">

   <div class="w3-container w3-center w3-padding-large w3-yellow">

      <!-- Menu centralizado -->
      <nav class="w3-bar w3-large w3-padding-large">
         <a href="#!" class="w3-bar-item w3-button w3-padding w3-hover-green">MixTutoriais</a>
         <a href="#!" class="w3-bar-item w3-button w3-padding w3-hover-green">W3.CSS</a>
         <a href="#!" class="w3-bar-item w3-button w3-padding w3-hover-green">WORDPRESS</a>
         <a href="#!" class="w3-bar-item w3-button w3-padding w3-hover-green">WINDOWS</a>
         <a href="#!" class="w3-bar-item w3-button w3-padding w3-hover-green">LINUX</a>
         <a href="#!" class="w3-bar-item w3-button w3-padding w3-hover-green">SAÚDE</a>
      </nav>

   </div>

   <div class="w3-xxlarge w3-display-middle">MENU CENTRALIZADO COM W3.CSS</div>
        
 </body>

</html>

Está vendo como é fácil fazer um menu centralizado com o W3.css Framework? Eu usei poucas classes, então dá para implementar muita coisa boa. Sugiro a você ficar de olho aqui no blog, ainda vai vir muitas informações sobre w3.css!!

Espero ter te ajudado com este tutorial e não deixe de conferir os outros tutoriais sobre WordPress, Windows, W3.CSS, Linux e Saúde pois são preparados para usuários novos e intermediários. Tenho também vários links de cupons para produtos, cursos e games para você. Até o próximo tutorial.

Fonte

Flaubert Henriques
Atualizado em 16/11/2019 - Escrito a 3 meses.
Categoria: W3.CSS
Tags: , ,

Deixe um comentário

avatar
  Inscreva-se  
Seguir comentários