Construindo um Web Site Responsive From Scratch
Neste capítulo vamos construir um site W3.CSS responsiva a partir do zero.
Em primeiro lugar, começar com uma página HTML simples, com uma janela de exibiçã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="http://www.w3ii.com/lib/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> Tente você mesmo " Coloque elementos em Containers
Agora precisamos adicionar uma margem e padding comum a todos os elementos.
Para conseguir isso, colocar os elementos HTML dentro de recipientes (<div class = "w3-container">)
Para tornar possível definir classes separadas para cabeçalhos. Separa-se o cabeçalho do resto do conteúdo, usando um elemento separado <div>:
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> Tente você mesmo " Classes de cor
classes de cor define a cor dos elementos.
Este exemplo adiciona uma cor para o 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>
Tente você mesmo " classes de tamanho
classes de tamanho define o tamanho do texto para elementos.
Este exemplo adiciona um tamanho para 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 sage
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>
Tente você mesmo " Use Semantic Elements
Se você gosta de seguir as recomendações semântica 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="http://www.w3ii.com/lib/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> Tente você mesmo " Disposição Responsive Multicolumn
Com W3.CSS é fácil criar um layout responsivo várias colunas.
As colunas serão reorganizar-se automaticamente quando vistos em diferentes tamanhos de tela.
Algumas regras de grade:
- Comece com uma classe linha <div class = "w3-row-preenchimento">
- Use classes predefinidas como "w3 terço" de fazer rapidamente colunas de grade
- Coloque seu conteúdo de texto dentro das colunas de grade
Este exemplo mostra como criar três colunas de igual largura:
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> Tente você mesmo " Este exemplo mostra como criar quatro colunas de igual largura:
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> Tente você mesmo " Colunas com larguras diferentes
Este exemplo cria uma disposição de três-coluna em que a coluna no meio é mais larga que a primeira e ú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> Tente você mesmo " barras de navegação
Um barra de navegação é um cabeçalho de navegação que é colocada no topo da página.
Exemplo
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Tente você mesmo " navegação lateral
Com navegação lateral, você tem várias opções:
- Sempre exibir o painel de navegação à esquerda do conteúdo da página.
- Abra o painel de navegação, escondendo a parte esquerda do conteúdo da página.
- Abra o painel de navegação, escondendo todo o conteúdo da página.
- Mudar o conteúdo da página para a direita, ao abrir o painel de navegação.
Este exemplo abre o painel de navegação, escondendo uma parte do conteúdo da página:
<nav class="w3-sidenav w3-black w3-card-2" style="display:none">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
<a href="#">Link 4</a>
<a
href="#">Link 5</a>
</nav>
JavaScript usado para abrir e ocultar o menu:
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
Tente você mesmo "