css能否绘制树形关系图？该怎么处理

css能否绘制树形关系图？
如题,效果如下

------解决方案--------------------
要么做图片，打热点
可以 canvas，flash VML 来做， js动态生成很多点来画线，效率低。

写了个js生成点画直线的，楼主参考下
HTML code

<!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;}
css能否绘制树形关系图？该怎么处理

相关推荐
