W3.CSS - Bou 'n mobiele toepassing
Flieks 2014
Gevries
Die reaksie op die animasies was belaglik.
Die fout in ons sterre
Aangrypend, aangrypend en werklik goed gemaak.
Die Avengers
'n Groot sukses vir Marvel en Disney.
Skep 'n basiese mobiele bladsy
Die pro-weergawe van W3.CSS is perfek vir mobiele toepassings. Dit is klein en baie vinnig.
Voorbeeld
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3pro.css">
<body>
<!-- Content here -->
</body>
</html>
Voeg inhoud by
Voorbeeld (gebruik klassieke HTML-elemente)
<div class="w3-container">
<h1>Movies 2014</h1>
</div>
<div class="w3-cell-row">
<div class="w3-cell">
<img
src="img_avatar.jpg">
</div>
<div class="w3-cell w3-container">
<h3>Frozen</h3>
<p>The response to the animations was ridiculous.</p>
</div>
</div>
<div class="w3-container">
<h3>Footer</h3>
</div>
Voorbeeld (gebruik semantiese HTML-elemente)
<header class="w3-container">
<h1>Header</h1>
</header>
<div class="w3-cell-row">
<div class="w3-cell">
<img
src="img_avatar.jpg">
</div>
<div class="w3-cell 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>
Voeg 'n kleurtema by
Voorbeelde
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-red.css">
Lees meer oor kleurtemas in W3.CSS Kleurtemas .
Voeg meer styl by
Voorbeeld
<img class="w3-circle" src="img_avatar.jpg" alt="avatar">
<h3 class="w3-text-theme">Frozen</h3>
Add Side Navigation
Example
<nav class="w3-sidebar w3-bar-block w3-card" style="width:30%">
<div class="w3-red">
<a href="#" onclick="closeSidebar()"
class="w3-button w3-display-topright w3-xlarge">X</a>
<div
class="w3-padding-large w3-center">
<img class="w3-circle" src="img_avatar.jpg"
alt="avatar">
</div>
</div>
<a
class="w3-bar-item w3-button"
href="#">Home</a>
<a class="w3-bar-item w3-button" href="#">Friends</a>
<a
class="w3-bar-item w3-button" href="#">Messages</a>
</nav>
<script>
function openSidebar() {
document.getElementById("mySidebar").style.display = "block";
}
function closeSidebar() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
Fixed Navigation, Header and Footer
Example
<header
class="w3-top">
<nav
class="w3-top">
<footer
class="w3-bottom">