萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 腳本Html教程 >> HTML Frameset 例子代碼

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; i<obj.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("( ?|^)sfhoverb"), "");
  }
 }
}
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;
}

copyright © 萬盛學電腦網 all rights reserved