☰ Filme 2014
Îngheţat
Răspunsul la animații ridicol.
Deranjament stelele noastre
Touching, prindere și cu adevărat bine făcut.
Răzbunătorii
Un mare succes pentru Marvel și Disney.
Crearea unui mobil de bază Page
Exemplu
<!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>style de atribut "max-width:400px" simulează un telefon mic. Acesta va fi eliminat mai târziu.
Adăugați conținut
Exemplu (using classic HTML elements)
<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> Încearcă - l singur » Exemplu (using semantic HTML elements)
<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> Încearcă - l singur » Adăugați o temă de culoare
Exemple
<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"> Încearcă - l singur » Cititi mai multe despre culoare teme în Teme W3.CSS de culoare .
Adauga Biblioteca Pictograma
Exemplu
<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>
Încearcă - l singur » Acest exemplu utilizează pictograme Awesome Font. Puteți utiliza orice bibliotecă pictogramă.
Adăugați mai mult stil
Exemplu
<img class="w3-cicle" src="img_avatar.jpg" alt="avatar">
<h3 class="w3-text-theme">Frozen</h3> Încearcă - l singur » Adăugați Side navigare
Exemplu
<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> Încearcă - l singur » Ascundeți navigare laterală
Exemplu
<nav class="w3-sidenav w3-card-2 w3-white" style="width:30%;display:none"> Încearcă - l singur »