HTML Frameset 例子代码

这一篇，介绍一个Frameset做的简单到不能再简单的框架。

       好先来看看这个框架的页面构成，由于是纯手工做的测试程序，所以只是在Notepa++中做了一下代码，很粗略。但是还是包含了Frameset中的大致内容的。好，言归正传，首先看一下文件构成。

1.Frame.htML包含框架的结构

2.link.html包含框架左侧菜单栏

3.FirstPage.html包含框架主页面的一行文字（个人比较懒，没有好好做）

4.secondPage.html和上面3类似，用于测试。

下面是一个截图（不清晰，第一次搞这个东西）
 

先看一下Frame.htm中的代码：

html>
head>
/head>
frameset cols="159px,*">
 frame name="a1" src="link.html" noresize="yes"  border="1px"  scrolling="auto" bordercolor="blue" >
 frame name="a2" src="firstPage.html">  
/frameset>
/html>

       是不是感觉很简单？主要就是一个Frameset元素，然后设置了cols="159px,*"这个属性。这个属性的作用就是将页面分割成159px和其他两块区域。如上图所示。

         然后是frame标记，上面的cols属性有几个值下面的frame> 子元素相应的也应该有几个。然后是一些frame> 常见的属性。包括边框的宽度，是否出现滚动条，边框颜色，是否允许用户改变大小。源文件是哪个等等一些属性。

         然后第二个的源文件指向firstPage作为测试用。

接下来是link.html:

style tyPE="text/css">
!--
*{ margin:0; padding:0; border:0; }
body {
 font-family: arial, 宋体, serif;
 font-Size:12px;
}
#nav {
 width:180px;
    line-height: 24px;
 list-style-type: none;
 text-align:left;
    /*定义整个ul菜单的行高和背景色*/
}
/*==================一级目录===================*/
#nav a {
 width: 160px;
 display: block;
 padding-left:20px;
 /*Width(一定要)，否则下面的Li会变形*/
}
#nav li {
 background:#CCC; /*一级目录的背景色*/
 border-bottom:#FFF 1px solid; /*下面的一条白边*/
 float:left;
 /*float：left,本不应该设置，但由于在Firefox不能正常显示
 继承Nav的width,限制宽度，li自动向下延伸*/
}
#nav li a:hover{
 background:#CC0000; /*一级目录onMouseOver显示的背景色*/
}
#nav a:link  {
 color:#666; text-decoration:none;
}
#nav a:visITed  {
 color:#666; text-decoration:none;
}
#nav a:hover  {
 color:#FFF; text-decoration:none; font-weight:bold;
}
/*==================二级目录===================*/
#nav li ul {
 list-style:none;
 text-align:left;
}
#nav li ul li{
 background: #EBEBEB; /*二级目录的背景色*/
}
#nav li ul a{
         padding-left:10px;
         width:160px;
 /* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/
}
/*下面是二级目录的链接样式*/
#nav li ul a:link  {
 color:#666; text-decoration:none;
}
#nav li ul a:visited  {
 color:#666; text-decoration:none;
}
#nav li ul a:hover {
 color:#F3F3F3;
 text-decoration:none;
 font-weight:normal;
 background:#CC0000;
 /* 二级onmouseover的字体颜色、背景色*/
}
/*==============================*/
#nav li:hover ul {
 left: auto;
}
#nav li.sfhover ul {
 left: auto;
}
#content {
 clear: left;
}
#nav ul.collapsed {
 display: none;
}
-->
#PARENT{
 width:180px;
}
*#PARENT{
 width:100%;
}
/style>
div id="PARENT">
 ul id="nav">
  li> a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')"> 我的网站/a>
   ul id="ChildMenu1" class="collapsed">
    li> a href="firstPage.html" target="a2"> 第一个页面/a> /li>
    li> a href="secondPage.html" target="a2"> 第二个页面/a> /li>
  /ul>
  /li>
  li> a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')"> 我的帐务/a>
    ul id="ChildMenu2" class="collapsed">
     a href="#"> 支付/a> /li>
     li> a href="#"> 管理/a> /li>
     li> a href="#"> 网上支付/a> /li>
     li> a href="#"> 登记汇款/a> /li>
     li> a href="#"> 在线招领/a> /li>
     li> a href="#"> 历史帐务/a> /li>
    /ul>
  /li>
  li> a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')"> 网站管理/a>
    ul id="ChildMenu3" class="collapsed">
     li> a href="#"> 登录/a> /li>
     a href="#"> 角色管理/a> /li>
     li> a href="#"> 用户管理/a> /li>
    /ul>
  /li>
 /ul>
/div>
script type=text/javascript>
!--
VAR LastLeftID = "";
function menuFix() {
 var obj = document.getElementById("nav").getelementsbytagname("li");
 
 for (var i=0; iobj.length; i++) {
  obj[i].onmouseover=function() {
   this.classname+=(this.className.length> 0? " ": "") + "sfhover";
  }
  obj[i].onMouseDown=function() {
   this.className+=(this.className.length> 0? " ": "") + "sfhover";
  }
  obj[i].onMouseUp=function() {
   this.className+=(this.className.length> 0? " ": "") + "sfhover";
  }
  obj[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
  }
 }
}
function DoMenu(emid)
{
 var obj = document.getElementById(emid);
 obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
 if((LastLeftID!="")& & (emid!=LastLeftID)) //关闭上一个Menu
 {
  document.getElementById(LastLeftID).className = "collapsed";
 }
 LastLeftID = emid;
}
function GetMenuID()
{
 var MenuID="";
 var _paramStr = new String(window.location.href);
 var _sharpPos = _paramStr.indexOf("#");
 
 if (_sharpPos > = 0 & & _sharpPos _paramStr.length - 1)
 {
  _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
 }
 else
 {
  _paramStr = "";
 }
 
 if (_paramStr.length > 0)
 {
  var _paramArr = _paramStr.split("& ");
  if (_paramArr.length> 0)
  {
   var _paramKeyVal = _paramArr[0].split("=");
   if (_paramKeyVal.length> 0)
   {
    MenuID = _paramKeyVal[1];
   }
  }
 }
 
 if(MenuID!="")
 {
  DoMenu(MenuID)
 }
}
GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
menuFix();
-->
/script>

       这个其实就偷懒了，是从网上找的一个DIV+CSS+JS做的一个下拉菜单，有兴趣的可以自己看一下，我感觉自己能用起来，知道怎么改就OK了。

下面是两个测试页面，由于这连个测试页面稍微懂点HTML的都能写出来，这里就只贴出页面1的代码：

html>
 head>
title> 第一个页面/title>
style>
/style>
/head>
body>
h1> 第一个页面/h1>
/body>
/html>

估计高手看到这都要吐了，一定说很垃圾，不过只是记录下自己做的小东西。呵呵，见谅了啊。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！