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


    前言

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

    内容

    用到的标签:

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

        效果图

     

    小结

        越来越有意思了啊!

     

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

  • 相关阅读:
    数组 滑动窗口
    爬虫案例 下载某文库付费文档 全格式
    双指针 三数之和
    双指针 四数之和
    双指针法 环形链表 II
    判断是否手机端
    C# 模拟点击
    chrome 扩展开发注意事项
    破解拖动验 证码
    //刷新任务栏图标 终止别的进程序有些程序有托盘会残留
  • 原文地址:https://www.cnblogs.com/zhoulitong/p/6412341.html
Copyright © 2020-2023  润新知