Assalamualaikum wr. wb.
Pada kesempatan kali ini saya akan menjelaskan kegunaan dari manipulasi list pada CSS.Memanipulasi list juga dapat dilakukan dengan menggunakan CSS. Bentuk manipulasi yang diperbolehkan kepada list adalah menentukan bentuk bullet dari list dan posisi list. Tabel berikut menunjukkan property – property yang dapat digunakan untuk memanipulasi list.
Sebagai contoh, Buatlah file html dengan script sebagai berikut:
<html>
<head>
<title>css manipulasi list</title>
<style type="text/css">
.bullet_square{
list-style-type : square;
}
.bullet_circle{
list-style-type : circle;
list-style-position : inside;
}
.bullet_image{
list-style-image : url(gambar/poli.jpg);
}
</style>
</head>
<body bgcolor="lightyellow">
<h3>css manipulasi list</h3>
<hr>
<table>
<tr>
<td>
Juventus adalah tim terbaik Italia
<ul>
<li class="bullet_square">Juventus</li>
<li class="bullet_square">Inter Milan</li>
<li class="bullet_circle">AS Roma</li>
<li class="bullet_circle">AC Milan</li>
</ul>
<tr>
<td>Juventus berdiri pada tahun 1897
<ul class="bullet_image">
<li>Real Madrid</li>
<li>Barcelona</li>
<li class="bullet_circle">Atletico Madrid</li>
<li class="bullet_circle">Valencia</li>
<ul class="bullet_square">
<li>Bayern Munchen</li>
<li>Dortmund</li>
</ul>
</ul>
</table>
</body>
</html>
<head>
<title>css manipulasi list</title>
<style type="text/css">
.bullet_square{
list-style-type : square;
}
.bullet_circle{
list-style-type : circle;
list-style-position : inside;
}
.bullet_image{
list-style-image : url(gambar/poli.jpg);
}
</style>
</head>
<body bgcolor="lightyellow">
<h3>css manipulasi list</h3>
<hr>
<table>
<tr>
<td>
Juventus adalah tim terbaik Italia
<ul>
<li class="bullet_square">Juventus</li>
<li class="bullet_square">Inter Milan</li>
<li class="bullet_circle">AS Roma</li>
<li class="bullet_circle">AC Milan</li>
</ul>
<tr>
<td>Juventus berdiri pada tahun 1897
<ul class="bullet_image">
<li>Real Madrid</li>
<li>Barcelona</li>
<li class="bullet_circle">Atletico Madrid</li>
<li class="bullet_circle">Valencia</li>
<ul class="bullet_square">
<li>Bayern Munchen</li>
<li>Dortmund</li>
</ul>
</ul>
</table>
</body>
</html>
Bukalah file tersebut pada browser, dan hasilnya adalah sebagai berikut:
Demikianlah sedikit penjelasan tentang bagaimana penggunaan Manipulasi List pada CSS . Semoga bermanfaat, Salam sukses...
Demikianlah sedikit penjelasan tentang bagaimana penggunaan Manipulasi List pada CSS . Semoga bermanfaat, Salam sukses...
0 comments: