Estudo de caso W3.CSS
Criando um site responsivo do zero
Neste capítulo vamos construir um site responsivo W3.CSS do zero.
Primeiro, comece com uma página HTML simples, com uma janela de visualização inicial e um link para W3.CSS.
Exemplo
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Colocar elementos em contêineres
Para adicionar margens e preenchimento comuns, coloque os elementos HTML dentro de contêineres (<div class="w3-container">)
Separe o cabeçalho do restante do conteúdo, usando dois elementos <div> separados:
Exemplo
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Classes de cores
As classes de cores definem a cor dos elementos.
Este exemplo adiciona uma cor ao primeiro elemento <div>:
Exemplo
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Classes de tamanho
As classes de tamanho definem o tamanho do texto para os elementos.
Este exemplo adiciona um tamanho a ambos os elementos de cabeçalho:
Exemplo
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Usar elementos semânticos
Se você gosta de seguir as recomendações semânticas do HTML5. por favor faça!
Não importa para W3.CSS se você usar <div> ou <header>.
Exemplo
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
Layout responsivo de várias colunas
Com o W3.CSS é fácil criar um layout responsivo de várias colunas.
As colunas se reorganizarão automaticamente quando visualizadas em diferentes tamanhos de tela.
Algumas regras de grade:
- Comece com uma classe de linha <div class="w3-row-padding">
- Use classes predefinidas como "w3-third" para criar colunas de grade rapidamente
- Coloque seu conteúdo de texto dentro das colunas da grade
Este exemplo mostra como criar três colunas de largura igual:
Exemplo
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Este exemplo mostra como criar quatro colunas de largura igual:
Exemplo
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Colunas com larguras diferentes
Este exemplo cria um layout de três colunas em que a coluna do meio é mais larga que a primeira e a última coluna:
Exemplo
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Barras de navegação
Uma barra de navegação é um cabeçalho de navegação que é colocado na parte superior da página.
Exemplo
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
Navegação da página
Com a navegação lateral, você tem várias opções:
- Sempre exiba o painel de navegação à esquerda do conteúdo da página.
- Use uma navegação lateral responsiva dobrável e "totalmente automática".
- Abra o painel de navegação sobre a parte esquerda do conteúdo da página.
- Abra o painel de navegação sobre todo o conteúdo da página.
- Deslize o conteúdo da página para a direita ao abrir o painel de navegação.
- Exibir o painel de navegação no lado direito em vez do lado esquerdo
Este exemplo abre o painel de navegação sobre a parte esquerda do conteúdo da página:
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
JavaScript usado para abrir e ocultar o menu:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}