frameSet页面:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>跳转页</title>
</head>
<frameset cols="*" rows="75,*" style="height: 100%; overflow:hidden;">
<frame id="head" scrolling="no" marginwidth="0" marginheight="0" src="<%=request.getContextPath() %>/Login_loginTop" name="topFrame" frameborder="0" scrolling="no" noresize="noresize" id="topFrame"/>
<frameset cols="185,8,*" id="myFrame" >
<frame frameborder="0" scrolling="auto" src="<%=request.getContextPath() %>/LeftMenu_leftMenuShow" name="leftFrame" id="leftFrame"/>
<frame frameborder="0" scrolling="no" noresize="noresize" id="midFrame" name="midFrame" src="<%=request.getContextPath() %>/Login_loginSwitch"/>
<frame frameborder="0" scrolling="auto" src="<%=request.getContextPath() %>/Login_loginRight" name="main" id="main"/>
</frameset>
<noframes></noframes>
</frameset>
</html>
topFrame:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>frame top page</title>
<%@ include file="/cssBasePage.jsp"%>
<script type="text/javascript">
// 设置样式
function setCssFile(id){
//switchSkin(id);
$("#cssfile").attr("href","css/"+ id +".css"); //设置不同皮肤
try{
$(window.parent.frames['main'].document).find("#cssfile").attr("href","css/"+ id +".css");
$(window.parent.frames['leftFrame'].document).find("#cssfile").attr("href","css/"+ id +".css");
$(window.parent.frames['midFrame'].document).find("#cssfile").attr("href","css/"+ id +".css");
}catch(e){ }
$.cookie( "b2cPlatform" , id , { path: '/', expires: 10 });
}
</script>
</head>
<body style="height: 100%; overflow:hidden;">
<div class="jf_top">
<div class="skin">
<a href="javascript:setCssFile('jf_blue');"><img width="15" height="16" alt="grass" src="images/ocean.gif" /></a>
<a href="javascript:setCssFile('jf_red');"><img width="15" height="16" alt="grass" src="images/oyster.gif" /></a>
<a href="javascript:setCssFile('jf_green');"><img width="15" height="16" alt="grass" src="images/grass.gif" /></a>
</div>
</div>
</body>
</html>
需要换肤的页面引入:
<link href="<%=path %>/css/${cookie.b2cPlatform.value==null?'jf_blue':cookie.b2cPlatform.value}.css" rel="stylesheet" type="text/css" id="cssfile" />
默认为jf_blue.css.
操作cookie引用了jquery.cookie.js。
分享到:
相关推荐
总的来说,通过熟练运用`div`和CSS,我们可以创建出与`frameset`类似甚至更灵活的布局,同时避免了`frameset`带来的问题。这要求开发者具备良好的CSS理解和实践能力,以便根据具体需求调整和优化布局。在现代Web开发...
结合`frameset`和树形结构,如果你的压缩包包含了一个网页示例,它可能演示了如何在框架中显示一个XML文档的树状视图,或者使用JavaScript或Ajax动态加载和更新树结构。这样的实现可以帮助用户更直观地理解和操作XML...
`frameset`布局在早期的网页设计中颇为流行,它允许我们将浏览器窗口分割成多个独立显示区域,每个区域可以加载不同的网页内容。然而,随着Web标准的发展,`div+css`布局因其灵活性和可维护性逐渐成为主流。 `div`...
最后,由于frameset在现代网页设计中已逐渐被淘汰,学习这些知识的同时,也需要了解和掌握更现代的布局技术,如Flexbox和Grid布局,以及如何使用JavaScript和Ajax实现动态内容加载,以适应不断发展的Web标准。
这个名为"DIV+CSS实现的框架,仿frameset,支持左侧缩进"的项目,旨在提供一种与传统`frameset`类似的功能,但利用更现代、更灵活的`CSS`布局方法来实现。`frameset`是HTML4时代的特性,它允许开发者将一个网页分割...
在网页设计中,`div` 和 `frameset` 是...具体实现方式可能涉及CSS的定位、JavaScript的事件监听以及动态计算和调整`div`元素的属性。通过学习这些示例,开发者可以更好地理解和掌握在复杂布局中创建动态弹出层的技术。
在探讨如何在frameset框架集中应用背景图片时,我们首先需要理解frameset的基本概念以及CSS在其中的应用方式。本文将详细介绍如何通过frameset布局来实现背景图片的有效展示,并且会结合具体的HTML代码示例进行说明...
由于`frame`和`frameset`存在一些缺点,如不利于SEO(搜索引擎优化),不易于访问性,以及对响应式设计的支持不佳,现代网页设计倾向于使用更灵活的布局技术,如CSS Grid和Flexbox,或者是通过JavaScript动态创建和...
然而,随着响应式设计的兴起和现代浏览器对框架支持的限制,`frameset`的使用逐渐减少,取而代之的是更灵活的CSS布局技术。尽管如此,了解`frameset`的工作原理仍然是理解HTML历史和网页布局多样性的重要一环。
在网页设计领域,"frameset遮罩"是一个重要的概念,...总的来说,frameset遮罩是一种创建交互式或动态效果的技术,但随着Web技术的发展,我们应谨慎使用frameset,并考虑采用现代的、更灵活的解决方案来实现类似功能。
- 在现代网页设计中,通常使用CSS布局(如Flexbox或Grid)替代`frameset`,因为它们提供了更灵活的布局控制,并且对SEO友好。 通过以上介绍,我们可以理解`frameset`是如何在HTML中实现页面嵌套的,以及如何通过...
例如,使用CSS Grid可以创建多列或多行的动态网格布局,而Flexbox则适用于更简单的主-副或头-内容-尾布局。这些方法提供了更好的控制和灵活性,同时提高了可访问性和SEO性能。 总之,`frameset`是一种过时的页面...
这在"frameSet(完整框架)"的标题中提到,意味着我们将深入探讨如何利用frameset来构建一个完整的、可自定义布局的网页结构,以便与其他Web技术如JavaScript、CSS等进行高效集成。 首先,让我们理解什么是frameset。...
这可以通过JavaScript或者CSS来实现动态展开和收缩,增强交互性。 4. 工作区:右侧工作区是主要的内容展示区域,它会根据用户的操作加载相应的后台系统界面。可以利用AJAX技术实现实时更新,提高用户体验。 5. ...
`<frameset>`定义了窗口的分割方式,而`<frame>`则指定了每个分割区域加载的网页。例如: ```html <!DOCTYPE html> <title>Frameset 菜单示例 <frameset cols="20%,*"> </frameset> ``` 在这个例子中,`...
在处理`FrameSet`的边缘时,我们需要确保所有相关的CSS属性,如`margin`, `padding`和`border`都已正确设置为零,或者使用负值来抵消不必要的间距。 其次,"JS只能用于IE"指的是JavaScript代码可能只兼容Internet ...
现代Web开发更倾向于使用CSS布局技术来实现类似的功能。 #### 六、结论 虽然`Frameset`在现代Web开发中的使用频率不高,但它作为一种历史性的技术,对于理解早期Web设计思路仍然具有一定的参考价值。了解并掌握`...
`frameset` 允许我们将浏览器窗口分割成多个独立的部分,每个部分可以加载不同的网页内容,从而实现多页面同时展示的效果。标题 "好看的frameset实例" 提示我们这是一个关于如何美观地运用`frameset`的示例集,描述...
尽管`frameset`和`target`在早期的网页设计中很常见,但随着Web技术的发展,它们逐渐被更现代的布局方法如CSS Flexbox和Grid取代。使用`frameset`可能会导致搜索引擎优化问题,因为搜索引擎爬虫可能无法正确解析框架...