Belajar CSS Part 10 : Mengatur List Dengan CSS
MENGATUR LIST DENGAN CSS
CSS memiliki kemampuan untuk memanipulasi list HTML. CSS Sangat berguna untuk mengatur list kususnya untuk gaya tertentu misalnya list yang berbentuk titik, angka, angka romawi dan lain - lain. Untuk mengubah list kita dapat menggunakan properti CSS "list-style-type" yang berarti tipe gaya list.
Untuk mengubah list dengan CSS berikut contohnya :
index.html
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tutorial Mengatur List Dengan CSS <br/>
Script Kiddies</h1>
<!-- unordered list -->
Makanan
<ul class="makanan">
<li>Mie Ayam</li>
<li>Nasi Pecel</li>
<li>Bakso</li>
<li>Sate Kelinci</li>
</ul>
Minuman
<ul class="minuman">
<li>Soft drink</li>
<li>Teh manis</li>
<li>Kopi</li>
<li>Jus jeruk</li>
<li>Susu</li>
</ul>
<!-- ordered list -->
Alamat
<ol class="alamat">
<li>Bali</li>
<li>Jawa Timur</li>
<li>Jawa Barat</li>
<li>Jakarta</li>
</ol>
Sepeda Motor
<ol class="mobil">
<li>Jupiter</li>
<li>Satria fu</li>
<li>Supra X</li>
<li>Vixion</li>
</ol>
</body>
</html>
style.css
h1{
text-align: center;
}
ul.makanan{
list-style-type: square; /* list dengan bentuk square */
}
ul.minuman{
list-style-type: circle; /* list dengan bentuk lingkaran */
}
ol.alamat{
list-style-type: upper-alpha; /* list dengan bentuk alpha */
}
ol.mobil{
list-style-type: upper-roman; /* list dengan bentuk romawi */
}
 |
| Hasilnya seperti ini |
Dapat dilihat pada contoh diatas untuk mengatur list dapat menggunakan properti css "list-style-type" dan mengisikan value sesuai keinginan kita.
Untuk membuat list dengan bentuk kotak dapat menggunakan
list-style-type: square
Untuk membuat list dengan bentuk bulat dapat menggunakan
list-style-type: circle;
Untuk membuat ordered list dengan angka alphabet dapat menggunakan
list-style-type: upper-alpha
Untuk membuat ordered list dengan angka romawi dapat menggunakan
list-style-type: upper-roman
Cukup sampai sini tutorial Belajar CSS Part 10 : Mengatur List Dengan CSS Jika ada pertanyaan silahkan berikan komentar. Sekian Terima Kasih
Referensi : Malas Ngoding
TUTORIAL CSS LAINYA
- Belajar CSS Part 1 : Pengertian dan Mengenal CSS
- Belajar CSS Part 2 : Cara Penulisan CSS
- Belajar CSS Part 3 : Mengubah Background Dengan CSS
- Belajar CSS Part 4 : Margin dan Padding CSS
- Belajar CSS Part 5 : Mengatur Font Dengan CSS
- Belajar CSS Part 6 : Mengatur Hyperlink Dengan CSS
- Belajar CSS Part 7 : Mengatur Format Text Dengan CSS
- Belajar CSS Part 8 : Mengenal Position CSS
- Belajar CSS Part 9 : Mengatur Border Dengan CSS
- Belajar CSS Part 10 : Mengatur List Dengan CSS
- Belajar CSS Part 11 : Mengatur Float Dengan CSS
Tidak ada komentar :
Posting Komentar