This example demonstrates all the different list-item markers in CSS.
Code:<html> <head> <style type="text/css"> ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.none {list-style-type: none} ul.decimal {list-style-type: decimal} ul.decimal-leading-zero {list-style-type: decimal-leading-zero} ul.lower-roman {list-style-type: lower-roman} ul.upper-roman {list-style-type: upper-roman} ul.lower-alpha {list-style-type: lower-alpha} ul.upper-alpha {list-style-type: upper-alpha} ul.lower-greek {list-style-type: lower-greek} ul.lower-latin {list-style-type: lower-latin} ul.upper-latin {list-style-type: upper-latin} ul.hebrew {list-style-type: hebrew} ul.armenian {list-style-type: armenian} ul.georgian {list-style-type: georgian} ul.cjk-ideographic {list-style-type: cjk-ideographic} ul.hiragana {list-style-type: hiragana} ul.katakana {list-style-type: katakana} ul.hiragana-iroha {list-style-type: hiragana-iroha} ul.katakana-iroha {list-style-type: katakana-iroha} </style> </head> <body> <ul class="disc"> <li>Disc type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="circle"> <li>Circle type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="square"> <li>Square type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="none"> <li>The "none" type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="decimal"> <li>Decimal type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="decimal-leading-zero"> <li>Decimal-leading-zero type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="lower-roman"> <li>Lower-roman type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="upper-roman"> <li>Upper-roman type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="lower-alpha"> <li>Lower-alpha type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="upper-alpha"> <li>Upper-alpha type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="lower-greek"> <li>Lower-greek type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="lower-latin"> <li>Lower-latin type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="upper-latin"> <li>Upper-latin type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="hebrew"> <li>Hebrew type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="armenian"> <li>Armenian type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="georgian"> <li>Georgian type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="cjk-ideographic"> <li>Cjk-ideographic type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="hiragana"> <li>Hiragana type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="katakana"> <li>Katakana type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="hiragana-iroha"> <li>Hiragana-iroha type</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="katakana-iroha"> <li>Katakana-iroha type</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html>



LinkBack URL
About LinkBacks
Reply With Quote