HTML Frameset 例子代码

最新推荐文章于 2024-09-21 19:40:25 发布
最新推荐文章于 2024-09-21 19:40:25 发布
阅读量779 收藏 1
点赞数

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"  "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" "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" "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].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].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;
}
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>
TENCENTSYS
关注
HTML里面的FrameSet小例子
04-12
Frameset小例子,就是html里面框架的运用
html页面嵌套使用示例(frameset使用方法)
12-12
复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>”><html xmlns=”<a>”><head><meta ht
窗口框架frame(HTML前端)
最新发布
m0_63331248的博客
09-21 427
在 HTML 中，<frame>标签用于在框架集中定义一个子窗口（框架）。然而，需要注意的是，<frame>标签已经不被现代 Web 标准所推荐，并且在大多数现代浏览器中不再支持。取而代之的是使用<iframe>标签来创建内联框架。<iframe>
FrameSet 简单举例
badbad_boy的专栏
04-17 1192
这几天做一个HTML的Demo原型。 考虑到静态页面比较简单，因此没有好好规划就开动了。结果。 左边的导航栏把偶折磨的快吐血了。 每个画面都要贴一份代码的拷贝。 将近70个页面呢。哭死。 而且中间还改了好几个版本。 一个一个的贴。 眼泪哗哗的！main_frame.html的内容FrameSet的例子 top_frame.html的内容This is Top Fra
html中frameset标签无法正常显示原因分析及解决
12-13
在上述例子中，所有框架都指向了"aaa.html"，这意味着用户可能会看到重复的内容。通常，每个框架应指向不同的网页，以便展示不同的信息。 解决`<frameset>`无法正常显示的问题，需要检查以下几点： 1. `<frameset>...
html.rar_html_html简单例子
09-24
学习这些基础知识后，可以进一步探索更高级的HTML特性，如表单元素（`<form>`、`<input>`等），框架（`<frameset>`、`<frame>`），以及如何利用HTML5的新特性，如拖放功能、离线存储和媒体元素等。 此外，了解HTML...
HTML.rar_html例子
09-23
对于HTML的高级应用，可能会涉及到框架（`<frameset>`、`<frame>`）、表单（`<form>`、`<input>`、`<textarea>`、`<select>`等）、JavaScript交互（`<script>`标签引入JS代码，实现动态效果）以及HTML5的新特性，如...
关于frameset的代码
一只不知疲倦的学习猿
05-17 383
frameset基本用法，左右布局&lt;html&gt;&lt;head&gt;左frame代码&lt;/head&gt;&lt;body&gt;&lt;a href ="/example/html/frame_a.html" target ="showframe"&gt;Frame a&lt;/a&gt;&lt;br /&gt;&lt;a hre
HTML框架结构标签（frameset）
热门推荐
程金鹏（程利鹏）
06-17 1万+
第一次了解到竟然还有HTML框架结构标签（）。为此小编在实例中应用了一下，但是在搭建框架之初就遇到 了问题。为此总结本博客，以便大家能及时解决问题。 什么是HTML框架结构标签（&amp;lt;frameset&amp;gt;） 通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。 详情参考：http://www.w3schoo...
HTML - Frame、FrameSet 使用
陆氪和他的那些代码
10-15 2227
Ps：类似于&lt;table&gt;的单元格的布局。
使用框架结构之frameset
weixin_30660027的博客
04-18 218
首先，我希望在你的目录下，有4个网页，各自显示不同的内容。 如图所示： 1.html显示“火影忍者” 2.html显示“英雄联盟” 3.html显示“嵌入式开发、网页开发、安卓开发” 4.html显示“alsp” OK，来介绍下frameset的语法 <frameset rows="第一个框架窗口的高度，第二个框架窗口的高度......" ...
HTML中frameset框架的用法，一次性全弄懂！
路虽远，行则必至！
04-03 7725
一： <frameset>框架标记 <FRAMESET>称框架标记，用以宣告HTML文件为框架模式，并设定视窗如何分割 <FRAME>则只是设定某一个框窗内的参数属性 <FRAMESET>参数设定： 例如： <frameset row=“90，*” frameborder="0" border=“0" framespacing="2" bord...
frame页面框架示例
03-02
frame页面框架示例，分上、左、下三块，左侧只有单一示例菜单。
html制作网页frameset,HTML Frameset 例子代码_HTML/Xhtml_网页制作
weixin_36111561的博客
06-15 476
这一篇，介绍一个Frameset做的简单到不能再简单的框架。好先来看看这个框架的页面构成，由于是纯手工做的测试程序，所以只是在Notepa++中做了一下代码，很粗略。但是还是包含了Frameset中的大致内容的。好，言归正传，首先看一下文件构成。1.Frame.html包含框架的结构2.link.html包含框架左侧菜单栏3.firstPage.html包含框架主页面的一行文字(个人比较懒，没有好...
html frameset边框,frameset框架集(示例代码)
weixin_35718537的博客
06-29 737
frame使用注意事项：1、frame不能脱离frameset单独使用2、frame不能放在body标签中，不然不起效果。3、frame的高度只能由frameset来决定。frameset：是框架集；里面只能存在frame，其它内容不能存在。frameset/frame常用属性：1、cols="90%,*":垂直切割页面(左右切割)，值可以是整数(像素)、百分比和*。*代表占用剩余的空间。值的个数...
frameset框架例子
Java海洋
07-16 5865
http://g.cn"  scrolling="no">             http://g.cn"  scrolling="no">                     http://g.cn"  scrolling="no">            http://g.cn" scrolling="no">
跳出页面的frameset框架代码
zhuxueliao的专栏
11-23 928
很多网页都是框架结构的，在很多的情况下会通过按钮点击事件或链接，跳出框架转到其它界面。例如说点击“注销登录”返回到登录界面。 一、通过运行脚本跳出框架有以下几种写法： 1.　 window.open('Login.aspx','_top')" 2. 　window.open('Login.aspx','_parent')" 3.　window.parent.loc
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值