Bagaimana membuat: tabel harga yang responsif
- Halaman sebelumnya Perkecil tajuk saat menggulir
- Halaman berikutnya Gulir parallax
Belajar cara menggunakan CSS untuk membuat tabel harga yang responsif.
Bagaimana membuat tabel harga yang responsif
Langkah pertama - Tambahkan HTML:
<div class="columns"> <ul class="price"> <li class="header">Dasar</li> <li class="grey">9.99 / tahun</li> <li>10GB Storage</li> <li>10 Emails</li> <li>10 Domains</li> <li>1GB Bandwidth</li> <li class="grey"><a href="#" class="button">Daftar</a></li> </ul> </div>
Kesadaran kedua - Tambahkan CSS:
* { box-sizing: border-box; } /* Membuat tiga kolom yang sama lebar */ .columns { float: left; width: 33.3%; padding: 8px; } /* Mengatur gaya daftar */ .price { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } /* Menambah bayangan saat mouse berada di atas */ .price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) } /* Judul tabel harga */ .price .header { background-color: #111; color: white; font-size: 25px; } /* Item daftar */ .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } /* Daftar item warna */ .price .grey { background-color: #eee; font-size: 20px; } /* Tombol "Daftar" */ .button { background-color: #04AA6D; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } /* Saat lebar layar kurang dari 600px, ubah lebar tiga kolom menjadi 100% (untuk menggumpal di layar kecil) */ @media only screen and (max-width: 600px) { .columns { width: 100%; } }
- Halaman sebelumnya Perkecil tajuk saat menggulir
- Halaman berikutnya Gulir parallax