经典iframe后台系统框架

http://blog.csdn.net/ime33

未经允许，不得转载！！

水平有限，欢迎指正、交流！

做的一个后台页面iframe框架系统，分享下！

iframe所有浏览器都支持 <iframe> 标签，创建包含另外一个文档的内联框架（即行内框架）；

属性：

align规定如何根据周围的元素来对齐此框架。

frameborder规定是否显示框架周围的边框。

height规定 iframe 的高度。

longdesc规定一个页面，该页面包含了有关 iframe 的较长描述。

marginheight定义 iframe 的顶部和底部的边距。

marginwidth定义 iframe 的左侧和右侧的边距。

name规定 iframe 的名称。

sandbox启用一系列对 <iframe> 中内容的额外限制。

scrolling规定是否在 iframe 中显示滚动条。

seamless规定 <iframe> 看上去像是包含文档的一部分。

src规定在 iframe 中显示的文档的 URL。

srcdoc规定在 <iframe> 中显示的页面的 HTML 内容。

width定义 iframe 的宽度。

效果图：

demo：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>css滤镜</title><style type="text/css">  * {  margin: 0px;  padding: 0px; font-size: 16px;font-family: 微软雅黑; }  html,body,.mainbox{position: relative;width: 100%;height: 100%;}.mainbox header{position: absolute;top: 0;left: 0;right: 0;height: 55px;background: blue;z-index: 3;line-height: 55px;}.mainbox .left{position: absolute;top: 0;left: 0;height: 100%;width: 210px;background: gray;z-index: 2;}.mainbox .right{position: absolute;top: 55px;padding-left: 210px;background: #efe9e9;width: 100%;box-sizing:border-box;overflow: hidden;}.mainbox .right .rightbox{/*overflow-y:scroll;*/}.mainbox .right .rightbox .rightcon p{text-align: center;}footer{background: #000;height: 40px;line-height: 40px;width: 100%;position: absolute;bottom: 0;z-index: 5;}footer p,header p,.left p{text-align: center;font-size: 16px;color: #fff;}.left p{margin-top: 300px;}</style> </head><body><div class="mainbox">  <header><p>这是顶部</p></header><div class="left"><p>这里是左边菜单</p></div><div class="right" id="right"><!-- <div class="rightbox" id="rightbox"><div class="rightcon"><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p><p>这是主体</p></div></div> --><iframe src="http://blog.csdn.net/ime33/article/details/54380549" frameborder="0" scrolling="yes" width="100%" height="100%"></iframe></div></div> <footer><p>这里是底部</p></footer><script type="text/javascript">var viewH = document.documentElement.clientHeight;console.log(viewH)var right = document.getElementById("right");right.style.height = (viewH - 95)+"px";</script> </body>
</html>

感谢阅读！！

经典iframe后台系统框架相关推荐

Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建
Ant Design Pro of Vue--蚂蚁金服中后台系统框架搭建 Ant Design Pro of Vue下载安装启动步骤: 一.Ant Design Pro of Vue 的介绍 Ant ...
使用Axure设计中，大型的后台系统原型总结
使用Axure设计中,大型的后台系统原型总结 2018年4月16日luodonggan 在产品原型设计中,经常会涉及到后台系统原型的设计,如何设计出更规范标准的后台系统原型,是很多产品同行们都会遇到的 ...
iframe 接班人-微前端框架 qiankun 在中后台系统实践
「福利」 ✿✿ ヽ(°▽°)ノ ✿:文章最后有抽奖,转转纪念 T 恤,走过路过不要错过哦背景在转转的中台业务中,交易流转.业务运营和商户赋能等功能,主要集中在两个系统中(暂且命名为 inner/o ...
IE8前端框架之中后台系统解决方案（一）
需求兼容ie8 (客户群体电脑因为安全问题无法升级,所以必须兼容ie8 ) 界面是中后台系统管理界面形成框架,方便二次开发人员开发. 形成组件库,并且可配置化提升界面颜值思路兼容ie8 本咸 ...
JS 框架：后台系统完整的解决方案
JS 框架 :后台系统完整的解决方案参考文章: (1)JS 框架 :后台系统完整的解决方案 (2)https://www.cnblogs.com/zaohe/archive/2013/04/02/2 ...
从无到有：微信后台系统的演进之路
从无到有 2011.1.21 微信正式发布.这一天距离微信项目启动日约为2个月.就在这2个月里,微信从无到有,大家可能会好奇这期间微信后台做的最重要的事情是什么? 我想应该是以下三件事: 1. 确定了 ...
从0到1：微信后台系统的演进之路（转自INFOQ）
2个月的开发时间,微信后台系统经历了从0到1的过程.从小步慢跑到快速成长,经历了平台化到走出国门,微信交出的这份优异答卷,解题思路是怎样的?本文由张文瑞,微信后台团队出品. 从无到有 2011.1.2 ...
从 0 到 1：微信后台系统的演进之路
编者按:2 个月的开发时间,微信后台系统经历了从 0 到 1 的过程.从小步慢跑到快速成长,经历了平台化到走出国门,微信交出的这份优异答卷,解题思路是怎样的?本文由张文瑞,微信后台团队出品.本文由 3 ...
从0到1：微信后台系统的演进之路
转载地址:http://mp.weixin.qq.com/s?__biz=MjAzNzMzNTkyMQ==&mid=404205869&idx=1&sn=c9c7e245483 ...

经典iframe后台系统框架

经典iframe后台系统框架相关推荐

最新文章

热门文章