Costruzione di un sito Web Responsive From Scratch
In questo capitolo costruiremo un sito web W3.CSS reattivo da zero.
In primo luogo, iniziare con una semplice pagina HTML, con una finestra iniziale e un collegamento a W3.CSS.
Esempio
<!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> Prova tu stesso " Mettere Elementi in contenitori
Ora abbiamo bisogno di aggiungere un margine comune e padding a tutti gli elementi.
Per raggiungere questo obiettivo, mettere i elementi HTML all'interno di contenitori (<div class = "w3-contenitore">)
Per rendere possibile definire classi separate per le intestazioni. Separare l'intestazione dal resto del contenuto, utilizzando un elemento separato <div>:
Esempio
<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> Prova tu stesso " Classi a colori
classi di colore definisce il colore degli elementi.
Questo esempio aggiunge un colore al primo elemento <div>:
Esempio
<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>
Prova tu stesso " Classi di dimensioni
Classi di dimensioni definisce la dimensione del testo per gli elementi.
Questo esempio aggiunge una dimensione di entrambi gli elementi di intestazione:
Esempio
<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>
Prova tu stesso " Utilizzare Semantic Elementi
Se vi piace seguire le raccomandazioni semantiche HTML5. per favore fallo!
 | Non importa per W3.CSS se si utilizza <div> o <header>. |
|---|
Esempio
<!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> Prova tu stesso " Multicolonna layout Responsive
Con W3.CSS è facile creare un layout multicolonna reattivo.
Le colonne saranno riorganizzare se stessi automaticamente quando vengono visualizzati su schermi di varie dimensioni.
Alcune regole di griglia:
- Inizia con una classe di fila <div class = "w3-fila-padding">
- Utilizzare classi predefinite come "w3 terzo" per fare rapidamente le colonne della griglia
- Posizionare il contenuto del testo all'interno delle colonne della griglia
Questo esempio mostra come creare tre colonne di uguale larghezza:
Esempio
<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> Prova tu stesso " Questo esempio mostra come creare quattro colonne di uguale larghezza:
Esempio
<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> Prova tu stesso " Colonne di diverse larghezze
Questo esempio crea un layout a tre colonne dove la colonna in mezzo è più ampia rispetto alla prima e all'ultima colonna:
Esempio
<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> Prova tu stesso " barre di navigazione
Una barra di navigazione è un'intestazione di navigazione che è posto nella parte superiore della pagina.
Esempio
<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> Prova tu stesso " navigazione laterale
Con navigazione laterale, sono disponibili diverse opzioni:
- Visualizza sempre il pannello di navigazione a sinistra del contenuto della pagina.
- Aprire il pannello di navigazione, che nasconde la parte sinistra del contenuto della pagina.
- Aprire il pannello di navigazione, che nasconde tutto il contenuto della pagina.
- Spostare il contenuto della pagina a destra, quando si apre il pannello di navigazione.
Questo esempio apre il pannello di navigazione, che nasconde una parte del contenuto della pagina:
<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 utilizzato per aprire e nascondere il menu:
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
Prova tu stesso "