W3.CSS - Membangun Aplikasi Seluler
Film 2014
Beku
Tanggapan terhadap animasi itu konyol.
Kesalahan pada Bintang Kita
Menyentuh, mencengkeram dan benar-benar dibuat dengan baik.
Penuntut balas
Sukses besar untuk Marvel dan Disney.
Buat Halaman Seluler Dasar
Versi pro dari W3.CSS sangat cocok untuk aplikasi seluler. Ini kecil dan sangat cepat.
Contoh
<!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>
Tambah isi
Contoh (menggunakan elemen HTML klasik)
<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>
Contoh (menggunakan elemen HTML semantik)
<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>
Tambahkan Tema Warna
Contoh
<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">
Baca lebih lanjut tentang tema warna di Tema Warna W3.CSS .
Tambahkan Lebih Banyak Gaya
Contoh
<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">