Panel W3.CSS
Saya adalah sebuah panel.
Saya adalah sebuah panel.
saya adalah wadah.
saya adalah wadah.
Kelas Panel
Kelas w3-panel menambahkan margin atas dan bawah 16px dan padding kiri dan kanan 16px ke elemen HTML apa pun.
Contoh
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
Panel untuk Catatan
Kelas panel w3 sangat cocok untuk menampilkan catatan.
Catatan sering ditampilkan dengan warna pucat:
London adalah kota terpadat di Britania Raya, dengan wilayah metropolitan lebih dari 9 juta penduduk.
Contoh
<div class="w3-panel w3-pale-green">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
Untuk mempelajari lebih lanjut tentang Catatan W3.CSS, silakan kunjungi bab Catatan W3.CSS .
Panel untuk Kutipan
Kelas w3-panel sangat cocok untuk menampilkan kutipan.
Contoh
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
Untuk mempelajari lebih lanjut tentang Kutipan W3.CSS, silakan kunjungi bab Kutipan W3.CSS .
Panel untuk Peringatan
Kelas panel w3 sangat cocok untuk menampilkan peringatan.
Peringatan sering ditampilkan menggunakan warna yang kuat:
Bahaya!
Merah sering menunjukkan situasi berbahaya atau negatif.
Contoh
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
Untuk mempelajari lebih lanjut tentang Peringatan W3.CSS, silakan kunjungi bab Peringatan W3.CSS .
Panel sebagai Kartu
London adalah kota terpadat di Britania Raya, dengan wilayah metropolitan lebih dari 9 juta penduduk.
Contoh
<div class="w3-panel w3-blue w3-card-4">
<p>London is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
Panel Bulat
London adalah kota terpadat di Britania Raya, dengan wilayah metropolitan lebih dari 9 juta penduduk.
Contoh
<div class="w3-panel w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with
a metropolitan area of over 9 million inhabitants.</p>
</div>
Sembunyikan (Tutup) Panel
Menyembunyikan panel itu mudah.
Klik pada X untuk menutup panel ini.
Klik pada X untuk menutup panel ini.
Contoh
<div class="w3-panel
w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
Tampilkan (Buka) Panel
Menampilkan panel (tersembunyi) itu mudah:
Contoh
<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show
panel</button>
<div id="id01" class="w3-panel w3-green
w3-display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>