网上商城—网页布局和树标签的应用

前言

好多大型网站尤其是一些政府网站，经常采用一些树状图来做到大数据分类管理的目的。下面说一下，这个网页布局以及树形图的效果图是怎么拼接而成的。

内容

用到的标签：

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文件。

效果图

小结

越来越有意思了啊！

感谢您的宝贵时间······