DIV仿frame框架

最新推荐文章于 2021-06-15 21:18:52 发布
最新推荐文章于 2021-06-15 21:18:52 发布
阅读量243 收藏 1
点赞数
分类专栏： 技术转载 文章标签： 框架 XHTML HTML
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实现的效果二——类似iframe
翔的杂谈
08-31 9181
iframe应用很普遍，通常的需求有两种：　　1. 获取iframe效果，就是带一个滚动条，可以省不少版面。　　2. 要嵌一个页面，实现框架链接。　　如果不方便使用iframe，可以有如下相应解决方案：　　1. 可以使用css布局来实现，即可以少一个页面，也可以提高执行效率。　　2. 可以采用xmlhttp远程获取数据。　　A. 直接模拟iframe　　用层做容器　
div+js实现iframe效果
姑苏城外_寒山寺
03-30 4956
div+js实现iframe效果
html5 div模仿iframe布局框架
03-04
使用div标签来给网页划分框架模板。这个框架可以嵌套在任何div标签内，或者iframe框架内
DIV仿框架布局
weixin_34123613的博客
01-20 133
转载请注明出处，css探索之旅-飘零雾雨的庄园 　　记得早在07年的时候就写过一篇关于用div代替frameset，使用css来模仿框架布局的文章“DIV布局之头尾固定中间自适应”。 　　不过在那篇文章中尚有一个未解决的遗憾问题，那就是为了兼容ie6，需使用Quirks Mode模式，虽说效果可以达到，但多少还是让人耿耿于怀，非得fix不可。在写完那篇文章过了很长时间后，估计...
div仿框架布局
qindanwei0215的博客
01-18 943
记得早在07年的时候就写过一篇关于用div代替frameset，使用css来模仿框架布局的文章“DIV布局之头尾固定中间自适应”。 　　不过在那篇文章中尚有一个未解决的遗憾问题，那就是为了兼容ie6，需使用Quirks Mode模式，虽说效果可以达到，但多少还是让人耿耿于怀，非得fix不可。在写完那篇文章过了很长时间后，估计在08年左右，偶然发现一个可以解决该问题的方法。于是就对之前的d
Div代替Frame
earthwalkerhwattnet的专栏
05-22 800
<!DOCTYPE HTML> <html> <head> <title>Home</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="t...
以div代替frameset，用css实现仿框架布局
03-18
在实现仿框架布局时，首先创建几个`div`元素，每个`div`代表一个框架。然后，利用CSS的`display`属性来调整这些`div`的显示方式。例如，可以设置`display: inline-block`让`div`元素像行内元素一样排列，或者设置`...
div ,frame等空间的透明实现代码
12-09
总结起来，实现`div`和`frame`等元素的透明效果主要依赖于CSS的`background`属性以及可能需要的特定属性如`allowTransparency`。在设计网页时，透明效果能够增加视觉深度，但需注意，过度使用透明可能导致页面可读性...
用DIV模拟Frame的静态页面的实现
03-25
标题“用DIV模拟Frame的静态页面的实现”指的是在网页设计中不使用HTML的`<frameset>`或`<iframe>`元素，而是通过CSS和JavaScript技术来创建类似框架的效果。这种做法可以避免传统Frame带来的问题，如SEO优化困难、...
div+js模拟iframe实现左右框架.rar
11-23
例如，要实现左右框架布局，我们可以将左侧`div`设置为固定宽度并浮动，右侧`div`则占据剩余空间。这种方式比`iframe`更便于响应式设计，因为我们可以轻松调整`div`的大小和位置以适应不同屏幕尺寸。 然后，引入`...
用DIV仿iframe框架布局效果
03-21
用DIV仿iframe框架布局效果
div+css设计页面框架
06-05
div + css 设计的简单页面，也用到了gif动态图片，
html div镶嵌frame,HTML div Frame
weixin_28961565的博客
06-15 248
html>Documentbody{margin:0auto;width:100%;}.container{min-width:900px;border:1pxsolid#FA1111;}.top{width:100%;height:70px;border:1pxsolid#14F613;}.minframe{width:100%;display:inline;b...
用div实现框架（排除frame）
张朝玉的专栏
12-27 9074
frame中嵌套一iframe 之间的分隔条 也可以拖动 但是地图会发生改变移到我上面aaabbbccc document的使用document.getElementById("id1").style.display="none"; document.all.id1 同 document.getElementById("id1").   document.all是集合 有长度 可循环var obj
html中用div做框架的代码,用div和css做框架
weixin_39818550的博客
06-05 270
.container{width:1000px;margin:0auto;padding:10px;background:rgba(0,0,0,.3);}.head,.banner,.wrap{margin-bottom:10px;}.head{height:137px;background:rgba(0,0,255,.5);}.banner{height:307px;backg...
div+css实现框架布局
wucaijuan的专栏
12-10 3858
头部和底部的高度固定，并且位置需始终保持不变，中间部分的可视高度为除去头和尾的剩余部分，实际高度则随内容的多少自适应，如果实际高度超出了超出可视高度则出现滚动条 CSS部分：html,body { margin:0; font:14px/200% tahoma, "宋体", Simsun, Arial, Helvetica; height:100%; overflow:hidden;}
html中用div做框架的代码,CSS网页实例 利用box-sizing实现div仿框架结构实现代码
weixin_28737603的博客
06-05 378
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ][操作系统：Windows]先看代码：利用box-sizing实现div仿框架* { margin:0; padding:0;}html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:bor...
如何禁止frame框架使用拖动条
在深入探讨禁止使用拖动条的frame框架的知识点之前，首先需要明确几个基础概念。frame框架是在网页设计中用于布局的一种技术，它允许网页被分割成多个独立的区域，每个区域可以加载不同的HTML文档。Frame框架在早期...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值