W3.CSS - Erstellen einer mobilen App
Filme 2014
Gefroren
Die Reaktion auf die Animationen war lächerlich.
Der Fehler in unseren Sternen
Berührend, packend und wirklich gut gemacht.
Die Rächer
Ein großer Erfolg für Marvel und Disney.
Erstellen Sie eine einfache mobile Seite
Die Pro-Version von W3.CSS ist perfekt für mobile Apps. Es ist klein und sehr schnell.
Beispiel
<!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>
Inhalt hinzufügen
Beispiel (mit klassischen HTML-Elementen)
<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>
Beispiel (mit semantischen HTML-Elementen)
<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>
Fügen Sie ein Farbdesign hinzu
Beispiele
<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">
Lesen Sie mehr über Farbthemen in W3.CSS Farbthemen .
Fügen Sie mehr Stil hinzu
Beispiel
<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">