css能否绘制树形关系图？
如题,效果如下
[解决办法]
要么做图片，打热点
可以 canvas，flash VML 来做， js动态生成很多点来画线，效率低。
写了个js生成点 画直线的，楼主参考下
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> <style> .point { position:absolute; width:1px; height:1px; overflow:hidden; background:#000; } .col { position:absolute; left:300px; top:100px; font-size:20px; font-weight:bold; text-align:center; } .right { left:500px; } p { width:20px; border:1px solid red; } </style> </head> <body> <div class="col"> <p>a</p> <p>c</p> <p>b</p> </div> <div class="col right"> <p>B</p> <p>A</p> <p>C</p> </div> <script> var x = []; var y = []; document.onclick = function(e){ e = window.event || e; var tx = e.clientX; var ty = e.clientY; x.push(tx); y.push(ty); //console.log( x ); //console.log( y ); if( x.length == 2 && y.length == 2 ){ createLine(x[0], y[0], x[1], y[1]); x.length = 0; y.length = 0; } } function point(x, y){ var div = document.createElement('div'); div.style.left = x + 'px'; div.style.top = y + 'px'; div.className = 'point'; document.body.appendChild(div); } function createLine(x1,y1,x2,y2){ var tmp, x, y; if(x1 >= x2){ tmp = x1; x1 = x2; x2 = tmp; tmp = y1; y1 = y2; y2 = tmp; } for(var i = x1 ; i < x2; i++){ x = i; y = (y2 - y1)/(x2 - x1)*(x - x1)+y1; point(x,y); } } </script> </body></html>
[解决办法]
組織結構圖,樓主參考下:
請用鼠標點擊名稱展開組織結構圖
<!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>Organization</title>
<style type="text/css">
<!--
A:focus {outline:none;}/* 针对FF的虚线框 */
div#contain {background: none;font-size:12px;}
ul#map {float: none;margin: 0px auto;}
ul {clear: left;margin: 20px 0px 0px;padding: 0px;background: #fff;}
ul ul {border-top: 1px solid #c5c5c5;}
ul.solo {border-top: 0;}
li {float: left;list-style: none;position: relative;overflow: hidden;}
li li {margin: -1px 0 0 0;}
div {background: url(images/vLine.gif) repeat-y 50%;padding: 20px 5px 0 5px;margin: 0 .3em -20px .3em;}
div.section {padding: 20px 5px;}
div.sectionn {padding: 20px 5px;background: url(images/first.gif) 50% repeat-y;margin-left: 0;}
div.first {padding: 20px 5px;background: url(images/first.gif) 50% repeat-y;margin-left: 0;}
div.last {padding: 20px 5px;background: url(images/last.gif) 50% repeat-y;margin-right: 0;}
div.root {padding-top: 0;}
a {display: block;font-size: 12px;color: #222;text-align: center;text-decoration: none;width: 60px;height: 20px;margin: 0px auto;padding: 5px 0px 0px 0px;background: url(images/tu29.gif);}
a:hover {background: url(images/tu30.gif);}
/*IE 6 (when comma-separated, IE6 didn't work, so these are duped for IE7)*/
*html {text-align: center;}
*html a {margin: 0;position: relative;}
/*IE 7*/
*:first-child+html {text-align: center;}
*:first-child+html a {margin: 0; position: relative;}
-->
</style>
<script language='Javascript'>
function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.onfocusin=bluring;
</script>
</head>
<body>
<div id="contain">
<ul id="map" class="solo">
<li><div class="root section"><a href="javascript:void(0);" onclick="document.getElementById('ZZZ').style.display= document.getElementById('ZZZ').style.display=='block' ? 'none':'block';">董事长</a></div>
<ul id="ZZZ" style="display:none;">
<li><div class="sectionn"><a href="javascript:void(0);" onclick="document.getElementById('AAA').style.display= document.getElementById('AAA').style.display=='block' ? 'none':'block';">总经理</a></div>
<ul id="AAA" style="display:none;">
<li><div class="first"><a href="javascript:void(0);">主任</a></div></li>
<li><div class="section"><a href="javascript:void(0);" onclick="document.getElementById('BBB').style.display= document.getElementById('BBB').style.display=='block' ? 'none':'block';">科室</a></div>
<ul id="BBB" style="display:none;">
<li><div class="first"><a href="javascript:void(0);">一组</a></div></li>
<li><div class="last"><a href="javascript:void(0);">二组</a></div></li>
</ul>
</li>
<li><div class="section"><a href="javascript:void(0);" onclick="document.getElementById('CCC').style.display= document.getElementById('CCC').style.display=='block' ? 'none':'block';">布兰妮</a></div>
<ul id="CCC" style="display:none;">
<li><div class="first"><a href="javascript:void(0);">A组</a></div></li>
<li><div class="section"><a href="javascript:void(0);" onclick="document.getElementById('DDD').style.display= document.getElementById('DDD').style.display=='block' ? 'none':'block';">B组</a></div>
<ul id="DDD" style="display:none;">
<li><div class="first"><a href="javascript:void(0);">A组</a></div></li>
<li><div class="section"><a href="javascript:void(0);">B组</a></div></li>
<li><div class="last"><a href="javascript:void(0);">C组</a></div></li>
</ul>
</li>
<li><div class="last"><a href="javascript:void(0);">C组</a></div></li>
</ul>
</li>
<li><div class="last"><a href="javascript:void(0);">强仁</a></div></li>
</ul>
</li>
<li><div class="last"><a href="javascript:void(0);">经理</a></div></li>
</ul>
</li>
</ul>
</div>
</body>
</html>