☰ Filme 2014
Gefroren
Die Antwort auf die Animationen war lächerlich.
Die mieser
Berühren, Greifen und wirklich gut gemacht.
Die Rächer
Ein großer Erfolg für Marvel und Disney.
Erstellen Sie eine Grund Mobile Seite
Beispiel
<!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> | Das Attribut style "max-width: 400px" simuliert ein Telefon. Es wird später entfernt werden. |
|---|
Inhalt hinzufügen
Beispiel (mit klassischen HTML-Elemente)
<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> Versuch es selber " Beispiel (unter Verwendung von semantischen HTML-Elemente)
<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> Versuch es selber " Fügen Sie ein Farbthema
Beispiele
<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"> Versuch es selber " | Lesen Sie mehr über Farbthemen in W3.CSS Color Themes . |
|---|
Fügen Sie Ihre Icon Library
Beispiel
<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>
Versuch es selber " | Dieses Beispiel verwendet Font Super-Icons. Sie können ein beliebiges Symbol-Bibliothek verwenden. |
|---|
In More Style
Beispiel
<img class="w3-cicle" src="img_avatar.jpg" alt="avatar">
<h3 class="w3-text-theme">Frozen</h3> Versuch es selber " In Side Navigation
Beispiel
<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> Versuch es selber " Ausblenden der Seite Navigation
Beispiel
<nav class="w3-sidenav w3-card-2 w3-white" style="width:30%;display:none"> Versuch es selber "