CSS目录树
网上找的目录树都是一大堆js，看啊看不懂。我自己弄了一个目录树，就是背景图标有点问题，background能够绘两次图吗？no-repeat是不重复，有没有只重复2次或3次的？这样就能画两条以上的 | | 竖线。
标题前面的图标比较简单，以后再用js判断替换合适的图标。而目录的层次及数量跟据数据库读取。现在就是竖线怎么连接起来，横线怎么连接起来。。。
===============================================================
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>选择窗口</title><style type="text/css">*{ margin:0; padding:0;}#listframe { margin:20px; padding:6px; width:300px; height:auto; background-color:#CCC;}#listframe div { width:100%; height:auto; margin:0; padding:0; background-color:#CCC; background:url(http://www4.chuantu.info/tupianshangchuan/62/1325139214x-954498933.gif) 2px 0 no-repeat;}p { margin:0 2px; padding-left:18px; height:20px; background:url(http://www4.chuantu.info/tupianshangchuan/62/1325139174x-954498933.gif) 0 0 no-repeat;}.p1 {background:url(http://www4.chuantu.info/tupianshangchuan/62/1325139257x-954498933.gif) 0 0 no-repeat;}.divNo1 { background:url(http://www4.chuantu.info/tupianshangchuan/62/1325139214x-954498933.gif) 2px 0 no-repeat;}.divNo2 { background:url(http://www4.chuantu.info/tupianshangchuan/62/1325139214x-954498933.gif) 12px 0 no-repeat;}.LevelNo2 {margin-left:30px;}.LevelNo3 {margin-left:60px;}.LevelNo4 {margin-left:90px;}.LevelNo5 {margin-left:120px;}.LevelNo6 {margin-left:150px;}</style></head><body><div id="listframe"> <p class="p1">浙江童装有限公司</p> <div class="divNo1"><p class="LevelNo2">[01]经理室</p></div> <span id="01"> <div class="divNo2"><p class="LevelNo3">[02]行政中心</p></div> <span id="02"> <div><p class="LevelNo4">[21]人事部</p></div> <div><p class="LevelNo4">[22]行政科</p></div> </span> <div><p class="LevelNo3">[03]营销中心</p></div> <span id="03"> <div><p class="LevelNo4">[31]销售科</p></div> <div><p class="LevelNo4">[32]企划部</p></div> <span id="32"> <div><p class="LevelNo5">[321]工程科</p></div> <div><p class="LevelNo5">[322]陈列科</p></div> <div><p class="LevelNo5">[323]平面设计科</p></div> </span> <div><p class="LevelNo4">[33]招商科</p></div> <div><p class="LevelNo4">[34]数据分析科</p></div> <div><p class="LevelNo4">[35]直营科</p></div> <div><p class="LevelNo4">[36]物流部</p></div> </span> <div><p class="LevelNo3">[04]财务部</p></div> </span></div></body></html>