サンプル

• index.html
• block
  • index.html
  • div011-hp.html
  • div012-hpl.html
  • div020-hpl.html
  • ……
• table
  • index.html
  • table010.html
  • table001.html
  • table021.html
  • ……
• list
  • index.html
  • list220.html
  • list130.html
  • list102.html
  • ……
• inline
• others

ソース

XHTML
<ul class="list430">
  <li class="file">index.html</li>
  <li>block
    <ul>
      <li>index.html</li>
      <li>div011-hp.html</li>
      <li>div012-hpl.html</li>
      <li>div020-hpl.html</li>
      <li>……</li>
    </ul>
  </li>
  <li>table
    <ul>
      <li>index.html</li>
      <li>table010.html</li>
      <li>table001.html</li>
      <li>table021.html</li>
      <li>……</li>
    </ul>
  </li>
  <li>list
    <ul>
      <li>index.html</li>
      <li>list220.html</li>
      <li>list130.html</li>
      <li>list102.html</li>
      <li>……</li>
    </ul>
  </li>
  <li>inline</li>
  <li>others</li>
</ul>

CSS
ul.list430 li {
  margin: 0.5em 0 0.5em 30px;
  list-style: url(../img/mk-folder.png);
}

ul.list430 li.file {
  list-style: url(../img/mk-file.png);
}

ul.list430 li ul {
  margin: 0;
  padding: 0;
}

ul.list430 li ul li {
  list-style: url(../img/mk-file.png);
}

使用画像