css cheat list html

cheatset untuk list html

<html><head><title>css cheat</title>
<style type='text/css'>
 ul { 
 border-bottom:1px solid black;
 padding-left:0px; /*membuat list jadi rata kiri*/
 li.lower-roman { list-style-type:lower-roman; }
 li.square { list-style:square;}
 li.disc { list-style:disc;}
 li.circle { list-style:circle;}
 li.decimal { list-style:decimal;}
 li.decimal-leading-zero { list-style:decimal-leading-zero;}
 li.lower-roman { list-style:lower-roman;}
 li.lower-alpha { list-style:lower-alpha;}
 li.upper-alpha { list-style:upper-alpha;}
 li.lower-latin { list-style:lower-latin;}
 li.upper-latin { list-style:upper-latin;}
 li.lower-greek { list-style:lower-greek;}
 li.hebrew { list-style:hebrew;}
 li.hiragana { list-style:hiragana;}
 li.katakana { list-style:katakana;}
 li.hiragana-iroha { list-style:hiragana-iroha;}
 li.none { list-style:none;}
 li.gambar { list-style-image:url('8.gif');}
 li.bggambar { 
 background:url('8.gif') no-repeat;
 padding: .3em 0 1em 40px;
 font:1.1em/1.2 Verdana, Arial, Verdana, sans-serif;
 li.indent { list-style:none; text-indent:-.75em;}
 li.in-line { list-style-position:inside;}

 <li class='square'>square</li>
 <li class='disc'>disc</li>
 <li class='circle'>circle</li>
 <li class='decimal'>decimal</li>
 <li class='decimal-leading-zero'>decimal-leading-zero</li>
 <li class='lower-roman'>lower-roman</li>
 <li class='upper-roman'>upper-roman</li>
 <li class='lower-alpha'>lower-alpha</li>
 <li class='upper-alpha'>upper-alpha</li>
 <li class='lower-latin'>lower-latin</li>
 <li class='upper-latin'>upper-latin</li>
 <li class='lower-greek'>lower-greek</li>
 <li class='hebrew'>hebrew</li>
 <li class='hiragana'>hiragana</li>
 <li class='katakana'>katakana</li>
 <li class='hiragana-iroha'>hiragana-iroha</li>
 <li class='none'>none</li>
 <li class='gambar'>onion head - list-style-image</li>
 <li class='bggambar'>onion head - background-image</li>
 <li class='indent'>indent paragraph write here</li>
 <li class='in-line'>in-line paragraph write here</li>

Published by


just to remember what i had known :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s