☰ Films 2014
Gelé
La réponse aux animations était ridicule.
La faille Nos étoiles
Toucher, préhension et vraiment bien fait.
Les Vengeurs
Un énorme succès pour Marvel et Disney.
Créer une page mobile de base
Exemple
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/w3.css">
<body
style="max-width:400px">
<!-- Content goes here -->
</body>
</html> | L'attribut style "max-width: 400px" simule un petit téléphone. Il sera supprimé plus tard. |
|---|
Ajouter du contenu
Exemple (en utilisant des éléments HTML classiques)
<div class="w3-container">
<h1>Movies 2014</h1>
</div>
<div class="w3-row">
<div class="w3-col s3">
<img
src="img_avatar.jpg">
</div>
<div class="w3-col s9 w3-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>
<div class="w3-container">
<h3>Footer</h3>
</div> Try It Yourself » Exemple (en utilisant des éléments HTML sémantiques)
<header class="w3-container">
<h1>Header</h1>
</header>
<div class="w3-row">
<div class="w3-col s3">
<img
src="img_avatar.jpg">
</div>
<div class="w3-col s9 w3-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>
<footer class="w3-container">
<h3>Footer</h3>
</footer>
</body>
</html> Try It Yourself » Ajouter un thème de couleur
Exemples
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3-theme-blue.css">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3-theme-red.css"> Try It Yourself » | En savoir plus sur la couleur-thèmes dans W3.CSS Thèmes de couleur . |
|---|
Ajouter votre bibliothèque d'icônes
Exemple
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<h1>
<i class="fa fa-bars"></i> Header
</h1>
Try It Yourself » | Cet exemple utilise des icônes impressionnants polices. Vous pouvez utiliser une bibliothèque d'icônes. |
|---|
Ajouter Plus de style
Exemple
<img class="w3-cicle" src="img_avatar.jpg" alt="avatar">
<h3 class="w3-text-theme">Frozen</h3> Try It Yourself » Ajouter Navigation latérale
Exemple
<nav class="w3-sidenav w3-card-2
w3-white" style="width:30%">
<div class="w3-red">
<a href="javascript:void(0)" onclick="w3_close()"
class="w3-closenav w3-right w3-xlarge">×</a>
<div
class="w3-padding-large w3-center">
<img class="w3-circle" src="img_avatar.jpg"
alt="avatar">
</div>
</div>
<br>
<a
href="#">Home</a>
<a href="#">Friends</a>
<a href="#">Messages</a>
</nav>
<script>
function w3_open() {
var x =
document.getElementsByClassName("w3-sidenav")[0];
x.style.display = "block";
}
function w3_close() {
var x = document.getElementsByClassName("w3-sidenav")[0];
x.style.display = "none";
}
</script> Try It Yourself » Masquer la navigation latérale
Exemple
<nav class="w3-sidenav w3-card-2 w3-white" style="width:30%;display:none"> Try It Yourself »