Construire un site Web Responsive From Scratch
Dans ce chapitre, nous allons construire un site sensible à la W3.CSS à partir de zéro.
Tout d'abord, commencer par une page HTML simple, avec une fenêtre initiale et un lien vers W3.CSS.
Exemple
<!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> Essayez - le vous - même » Mettez éléments dans les conteneurs
Maintenant, nous devons ajouter une marge et le remplissage commun à tous les éléments.
Pour ce faire, mettre vos éléments HTML à l'intérieur des conteneurs (<div class = "w3-conteneur">)
Pour permettre de définir des classes séparées pour les en-têtes. Séparer l'en-tête du reste du contenu, en utilisant un élément <div> distincte:
Exemple
<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> Essayez - le vous - même » Classes de couleur
les classes de couleur définit la couleur des éléments.
Cet exemple ajoute une couleur à la première élément <div>:
Exemple
<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>
Essayez - le vous - même » Taille des classes
Classes de taille définit la taille du texte des éléments.
Cet exemple ajoute une dimension à la fois des éléments d'en-tête:
Exemple
<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>
Essayez - le vous - même » Utilisez sémantique Elements
Si vous souhaitez suivre les recommandations sémantiques HTML5. s'il vous plaît faire!
 | Il n'a pas d'importance pour W3.CSS si vous utilisez <div> ou <header>. |
|---|
Exemple
<!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> Essayez - le vous - même » Disposition Responsive Multicolumn
Avec W3.CSS il est facile de créer une mise en page en réponse multicolumn.
Les colonnes vont se réorganiser automatiquement lorsque vues sur différentes tailles d'écran.
Quelques règles de la grille:
- Commencez avec une classe de ligne <div class = "w3-row-padding">
- Utilisez des classes prédéfinies comme "w3 tiers" pour effectuer rapidement des colonnes de la grille
- Placez le contenu de votre texte dans les colonnes de la grille
Cet exemple montre comment créer trois colonnes de largeur égale:
Exemple
<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> Essayez - le vous - même » Cet exemple montre comment créer quatre colonnes de largeur égale:
Exemple
<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> Essayez - le vous - même » Colonnes de différentes largeurs
Cet exemple crée une disposition en trois colonnes où la colonne du milieu est plus large que la première et la dernière colonne:
Exemple
<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> Essayez - le vous - même » Barres de navigation
Une barre de navigation est un en-tête de navigation qui est placé en haut de la page.
Exemple
<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> Try It Yourself » Navigation latérale
Avec navigation latérale, vous avez plusieurs options:
- Toujours afficher le volet de navigation à gauche du contenu de la page.
- Ouvrez le volet de navigation, cachant la partie gauche du contenu de la page.
- Ouvrez le volet de navigation, cachant tout le contenu de la page.
- Déplacer le contenu de la page à droite, lors de l'ouverture du volet de navigation.
Cet exemple ouvre le volet de navigation, cachant une partie du contenu de la page:
<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 utilisé pour ouvrir et masquer le menu:
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
Try It Yourself »