Style your Source Code !

Setting

List type
Start number
Selector (Class)
ol / ul
li (Even)
li (Odd)

Result

The CSS code

Example (Ordered list)

(X)HTML
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Example</title>
  7. </head>
  8. <body>
  9. <h1>Example</h1>
  10. </body>
  11. </html>
CSS
  1. ol.sampleCode {
  2.      padding: 5px 5px 5px 50px;
  3.      border: 1px solid #FFCC66;
  4.      margin: 0px;
  5. }
  6. ol.sampleCode li {
  7.      font: 12px monospace;
  8.      padding: 4px 8px;
  9.      margin-bottom: 1px;
  10. }
  11. ol.sampleCode li.even {
  12.      background-color: #F3F3F3;
  13. }
  14. ol.sampleCode li.odd {
  15.      background-color: #FFF5E1;
  16. }

Example (Unordered list)

(X)HTML
  • <?xml version="1.0" encoding="utf-8"?>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • <title>Example</title>
  • </head>
  • <body>
  • <h1>Example</h1>
  • </body>
  • </html>
CSS
  • ul.sampleCode {
  •      padding: 10px;
  •      margin: 0px;
  •      width: 845px;
  •      background-color: #FFFFFF;
  • }
  • ul.sampleCode li {
  •      font: 12px monospace;
  •      padding-right: 12px;
  •      padding-left: 12px;
  • }
  • ul.sampleCode li.even {
  •      background-color: #F7FBFD;
  •      border-top: 1px solid #CEEFFF;
  •      border-bottom: 1px solid #CEEFFF;
  •      padding-top: 5px;
  •      padding-bottom: 5px;
  • }
  • ul.sampleCode li.odd {
  •      padding-top: 3px;
  •      padding-bottom: 3px;
  • }

Powered by 920