brand logo
 Página inicial / W3.CSS / Menu centralizado com o W3.css Framework

Menu centralizado com o W3.css Framework

W3.CSS
 -
Menu centralizado com o W3.css Framework Voltar para à Página inicial 

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

Aprenda mais:

Se chegou até aqui, você é determinado(a)! Espero que tenha gostado deste guia. Aqui no blog MixTutoriais eu dou várias dicas sobre: Windows, Linux e WordPress. Até o próximo tutorial!

Fonte

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *