CSS目录树解决办法
日期：2014-05-17 浏览次数：20966 次
CSS目录树
网上找的目录树都是一大堆js，看啊看不懂。我自己弄了一个目录树，就是背景图标有点问题，background能够绘两次图吗？no-repeat是不重复，有没有只重复2次或3次的？这样就能画两条以上的 | | 竖线。
标题前面的图标比较简单，以后再用js判断替换合适的图标。而目录的层次及数量跟据数据库读取。现在就是竖线怎么连接起来，横线怎么连接起来。。。
===============================================================
------解决方案--------------------
好难啊 求高手
网上找的目录树都是一大堆js，看啊看不懂。我自己弄了一个目录树，就是背景图标有点问题，background能够绘两次图吗？no-repeat是不重复，有没有只重复2次或3次的？这样就能画两条以上的 | | 竖线。
标题前面的图标比较简单，以后再用js判断替换合适的图标。而目录的层次及数量跟据数据库读取。现在就是竖线怎么连接起来，横线怎么连接起来。。。
===============================================================
- HTML code
<!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>
------解决方案--------------------
好难啊 求高手
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
