前言
好多大型网站尤其是一些政府网站，经常采用一些树状图来做到大数据分类管理的目的。下面说一下，这个网页布局以及树形图的效果图是怎么拼接而成的。
内容
用到的标签：
frameset标签：
frameset元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其简单的应用中，frameset元素仅仅会规定在框架中存在多个列或者多少行。
涉及到的属性：
| 属性 |
属性定义 |
| border |
设置框架的边框粗细 |
| bordercolor |
设置框架的边框颜色 |
| frameborder |
设置是否显示框架边框。设定值有：0,1；0表示不要边框，1表示要显示边框 |
| cols |
纵向分割页面。 |
| rows |
横向切割页面。 |
网页布局划分Demo
<!doctype html> <html> <head> <title>Document</title> </head> <frameset rows="15%,*"> <frame src="top.html" name="top"> <!--frameset标签为布局--> <frameset cols="15%,*"> <frame src="left.html" name="left"> <!--这里是网页布局的左边部分--> <frame src="right.html" name="right"><!--这里是网页布局的右边部分--> </frameset> </frameset> </html>
网页树形组成Demo
<link rel="StyleSheet" href="../dtree.css" type="text/css" />
<script type="text/javascript" src="dtree.js"></script>
<div class="dtree">
<script language="javascript">
d = new dTree('d');
//添加一个根节点：
d.add('01',-1,'论坛首页');
//添加一个子节点：
d.add('0101','01','我的论坛');
d.add('010101','0101','.NET技术','data.html','','right');
d.add('0102','01','我感兴趣的论坛');
d.add('010201','0102','.NET技术','data.html','','right');
d.add('010202','0102','java技术','data.html','','right');
d.add('010203','0102','Web开发','data.html','','right');
d.add('010204','0102','云计算','data.html','','right');
d.add('010205','0102','数据库开发','data.html','','right');
d.add('0103','01','游戏开发');
d.add('010301','0103','Cocos2d-x','data.html','','right');
d.add('010302','0103','Unity3D','data.html','','right');
d.add('010303','0103','其他游戏引擎','data.html','','right');
d.add('010304','0103','游戏策划与运营','data.html','','right');
document.write(d);
</script>
</div>其中需要引用封装好的dtree.css和dtree.js文件。
效果图
小结
越来越有意思了啊！
感谢您的宝贵时间······