Latest web development tutorials

Yayasan Daftar Harga

daftar harga dapat digunakan untuk menampilkan produk mereka:

contoh

<Class Ul = "harga-table ">
<Li class = "title"> Basic </ li>
<Li class = "harga"> $ 19,99 </ li>
<Li class = "description"> Besar untuk bisnis kecil </ li>
<Li class = "peluru-item "> 24/7 Support </ li>
<Li class = "peluru-item "> 15GB Storage </ li>
<Li class = "peluru-item "> 1GB Bandwidth </ li>
<Li class = "cta-tombol "> <a class = "button" href = "#"> Beli </ a> </ li>
</ Ul>

Coba »

Contoh analisis

  • ul.pricing-table - definisi daftar harga
  • li.title - mendefinisikan produk dari judul (latar belakang hitam)
  • li.price - harga yang ditentukan (font besar entri latar belakang abu-abu)
  • li.description - mendefinisikan deskripsi produk (jika diinginkan)
  • li.bullet-item - Fitur didefinisikan
  • li.ca-button - tombol teks (seperti "Beli", "Gabung", "Sign Up", dll)

Catatan: Tabel lebar 100% mengisi sebuah wadah, semua item memiliki perbatasan dan berpusat.


Daftar Harga Grid

Contoh berikut menunjukkan harga tiga produk perusahaan (tiga adalah divisi lebar sama):

contoh

<Class Div = "row">
<Class Div = "menengah-4 kolom">
<Class Ul = "harga-table ">
<Li class = "title"> Basic </ li>
...
</ Ul>
</ Div>
<Class Div = "menengah-4 kolom">
<Class Ul = "harga-table ">
<Li class = "title"> Pro </ li>
...
</ Ul>
</ Div>
<Class Div = "menengah-4 kolom">
<Class Ul = "harga-table ">
<Li class = "title"> Premium </ li>
...
</ Ul>
</ Div>
</ Div>

Coba »