`
as1001001
  • 浏览: 90999 次
  • 性别: Icon_minigender_1
  • 来自: 鞍山
社区版块
存档分类
最新评论

DIV仿frame框架

阅读更多
2行2列
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href="http://www.14px.com" title="Home" />
<title></title>
<style type="text/css">
* { margin:0; padding:0; list-style:none;}
html { height:100%; overflow:hidden; background:#fff;}
body { height:100%; overflow:hidden; background:#fff;}
div { background:#f60; line-height:1.6;}
.top { position:absolute; left:10px; top:10px; right:10px; height:50px;}
.side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;}
.main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;}
.bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;}
.main iframe { width:100%; height:100%;}
/*---ie6---*/
html { *padding:70px 10px;}
.top { *height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
.side { *height:100%; *float:left; *width:200px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
.main { *height:100%; *margin-left:210px; _margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
.bottom { *height:50px; *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
</style>
</head>
<body>
<div class="top"></div>
<div class="side">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="main">
<iframe frameborder="0" src="http://www.g.cn/"></iframe>
</div>
<div class="bottom"></div>
</body>
</html>


3行
<!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>
<meta name="author" content="LY" />
<style type="text/css">
* { margin:0; padding:0; list-style:none;}
body { height:100%; overflow:auto; background:#fff;}
div {  line-height:1.6; margin:0 auto; text-align:center;}
.top { position:absolute; left:10px; top:10px; right:10px; height:100px; overflow:auto; width:880px; background:#f60;}
.main { position:absolute; left:10px; top:110px; bottom:10px; right:10px; overflow:auto; width:880px; height:400px; background:blue;}
.bottom { position:absolute; left:10px; top:530px; right:10px; height:40px; overflow:auto; width:880px; background:green;}
#big{
	width: 900px;   
	height: 580px;
	margin-top: 0px;   
	margin-right: auto;   
	margin-bottom: 0px;   
	margin-left: auto;
}
iframe{
	width:100%;
	height:100%;
}
</style>
</head>
<body>
<div id="big">
<div class="top">
</div>
<div class="main">
</div>
<div class="bottom">
</div>
</div>
</body>
</html>
分享到:
评论

相关推荐

    以div代替frameset,用css实现仿框架布局

    在实现仿框架布局时,首先创建几个`div`元素,每个`div`代表一个框架。然后,利用CSS的`display`属性来调整这些`div`的显示方式。例如,可以设置`display: inline-block`让`div`元素像行内元素一样排列,或者设置`...

    用DIV模拟Frame的静态页面的实现

    标题“用DIV模拟Frame的静态页面的实现”指的是在网页设计中不使用HTML的`&lt;frameset&gt;`或`&lt;iframe&gt;`元素,而是通过CSS和JavaScript技术来创建类似框架的效果。这种做法可以避免传统Frame带来的问题,如SEO优化困难、...

    html 页面 frame框架 伸缩弹窗

    首先,`frame`是HTML4的一部分,而在HTML5中已经被废弃,推荐使用更现代的布局技术如`&lt;div&gt;`配合CSS的布局模式(如Flexbox或Grid)来实现相同的效果。然而,由于许多网站仍然使用`frame`,了解其工作原理仍然是有...

    禁止用拖动条的frame框架

    禁止用拖动条的frame框架示例 ,50%"&gt; &lt;frame src="content_left.html" name="leftFrame"&gt; &lt;frame src="content_right.html" name="rightFrame"&gt; ``` 在这个例子中,我们创建了一个两列的`frameset`,左边和...

    div+js模拟iframe实现左右框架.rar

    例如,要实现左右框架布局,我们可以将左侧`div`设置为固定宽度并浮动,右侧`div`则占据剩余空间。这种方式比`iframe`更便于响应式设计,因为我们可以轻松调整`div`的大小和位置以适应不同屏幕尺寸。 然后,引入`...

    实现div 遮罩 frameset

    `frameset`通过`&lt;frameset&gt;`和`&lt;frame&gt;`标签来定义框架的结构。例如: ```html ,50%"&gt; &lt;frame src="page1.html"&gt; &lt;frame src="page2.html"&gt; ``` 这段代码将浏览器窗口分为两个相等宽度的列,分别加载`page1....

    通过DreamweaverCS学习HTMLDIVCSS网页框架PPT学习教案.pptx

    的rows和cols属性用于定义框架的分割方式和大小,&lt;frame&gt;标签则设定每个框架的具体内容和属性。每个&lt;frame&gt;标签都有一系列属性,如src定义加载的页面,name用于标识框架以便链接跳转。 调整框架包括改变框架结构、...

    多个iframe,显示其中一个frame中的div,并处于最上层显示

    在网页设计和开发中,有时候我们需要处理多个`iframe`(内联框架)并实现特定的交互效果,例如只显示其中一个`iframe`中的`div`元素,并确保它在所有其他元素之上,即处于最上层显示。这样的需求通常出现在需要创建...

    div ,frame等空间的透明实现代码

    总结起来,实现`div`和`frame`等元素的透明效果主要依赖于CSS的`background`属性以及可能需要的特定属性如`allowTransparency`。在设计网页时,透明效果能够增加视觉深度,但需注意,过度使用透明可能导致页面可读性...

    DIV+CSS实现的框架,仿frameset,支持左侧缩进

    这个名为"DIV+CSS实现的框架,仿frameset,支持左侧缩进"的项目,旨在提供一种与传统`frameset`类似的功能,但利用更现代、更灵活的`CSS`布局方法来实现。`frameset`是HTML4时代的特性,它允许开发者将一个网页分割...

    通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT第10章__网页框架Frame

    通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT第10章__网页框架Frame

    iframe框架中实现打开多窗口方法

    `name`属性可以被添加到`&lt;iframe&gt;`、`&lt;frameset&gt;`、`&lt;frame&gt;`等元素中,用于标识特定的框架或窗口。这个属性值在`target`属性中作为目标引用,实现内容的定向加载。 ### 关键知识点二:在`frameset`对象中实现多...

    多个iframe,其中一个的div能够处于最上层显示

    当有多个 `iframe` 并存时,可能会出现重叠或者层级问题,特别是当其中某个 `iframe` 中有一个需要突出显示的 `div` 元素时。这个问题的关键在于理解 `z-index` 和层叠上下文的概念,以及如何正确地应用它们来确保...

    如何在框架(frame)页面之间使用appendChild()?

    在Web开发中,框架(frame)是一种将网页分割成多个独立区域的技术,每个区域可以加载不同的网页内容。在处理框架页面间交互时,JavaScript的`appendChild()`方法是一个非常实用的工具,它允许我们在DOM(文档对象模型...

    Dreamweaver学习HTML+DIV+CSS教学PPT第10章__网页框架Frame.pptx

    Dreamweaver学习HTML+DIV+CSS教学PPT第10章__网页框架Frame.pptx

    Efs Frame企业级开发框架asp 2.0源码.rar

    Efs Frame企业级开发框架2.0源码 EfsFrame企业级框架--.Net开发实例模型源码 Efsframe框架特点如下: 1、完善的Web表现层开发包:为企业Web表现层开发人员提供的一套完整、高效、美观的B/S结构设计表现层解决方案...

    LeaRun敏捷后台开发框架_LeaRun_LeaRun敏捷后台开发框架_learun开发框架_

    LeaRun敏捷后台开发框架是一套集快速开发+通用权限管理+工作流+即时通讯+微信组件+手机APP开发于一体的敏捷开发框架。开发难度小,提高80%以上的工作效率,可无线扩展,轻松开发APP、CRM、OA、ERP、WMS等。

    购物网站框架

    例如,`&lt;div&gt;`标签用于分组元素,`&lt;ul&gt;`和`&lt;li&gt;`用于创建列表,`&lt;form&gt;`用于创建表单,`&lt;input&gt;`定义用户输入字段,`&lt;a&gt;`定义链接等。 二、CSS样式 CSS(Cascading Style Sheets)用于控制网页的外观和布局。在购物...

    div覆盖 iframe

    而`iframe`则是用于在网页中嵌入另一个完整的网页或资源的框架。下面将详细介绍这两种元素及其相互作用。 `div`(Division)是HTML5中的一个块级元素,用于组织文档结构,可以容纳其他HTML元素。通过CSS(层叠样式...

Global site tag (gtag.js) - Google Analytics