Jumat, 17 Februari 2017

Mengatur List Dengan CSS

Assalamualaikum Wr.Wb

Pada postingan sebelumnya saya telah membahas tentang galery responsive,dan kali ini saya akan berbagi sedikit ilmu yaitu bagaimana mengatur List dengan CSS.Oke mari kita mulai

  •   Different List Item Markers

    ini di gunakan untuk list seperti: List Lingkaran,romawi,huruf dll

    <style>
    ul.a {
        list-style-type: circle;
    }

    ul.b {
        list-style-type: square;
    }

    ol.c {
        list-style-type: upper-roman;
    }

    ol.d {
        list-style-type: lower-alpha;
    }
    </style>

    Letakkan kode di atas di antara atribut <head> dan </head> 

    Berikut untuk scrip list Html nya

    <p>Ini Hasilnya</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>

    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>

    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>

    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>

    SS Hasilnya



  • Position The List Item Markers

     Ada dua macam tag di sini yaitu inside dan outside
    • Inside membuat list agak menjorok ke dalam
    • Outside membuat list agak menjorok ke luar 
     
    Berikut tag style nya
<style>
ul.a {list-style-position:inside;}
ul.b {list-style-position:outside;}
</style>
Dan ini tag List Html nya
 <p>List Inside</p>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>List Outside</p>
<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
SS Hasilnya

  • Styling List With Colors 

    Ini untuk memberi efek warna pada list yang kita buat

    berikut style nya
    <style>
    ol {
        background: #ff9999;
        padding: 20px;
    }

    ul {
        background: #3399ff;
        padding: 20px;
    }

    ol li {
        background: #ffe5e5;
        padding: 5px;
        margin-left: 35px;
    }

    ul li {
        background: #cce5ff;
        margin: 5px;
    }
    </style>
     
Berikut tag list Html nya
<p>List Inside</p>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<p>List Outside</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
Berikut SS Hasil



Oke,itu tadi sedikit tutorial mengatur list dengan Css,semoga bermanfaat sampai jumpa di postingan berikutnya.

Referensi:http://w3schools.com/

Wassalamualaikum Wr.Wb
Share:

0 komentar:

Posting Komentar