超强用CSS构建iframe效果

lyren111

lyren111

2016-02-19 14:33

下面这个超强用CSS构建iframe效果教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

 iframe应用很普遍,通常的需求有两种:

1,获取iframe效果,就是带一个滚动条,可以省不少版面。
2,要嵌一个页面,实现框架链接。

如果不方便使用iframe,可以有如下解决方案:

第一种需求如果我们使用css布局来实现,即可以少一个页面,也可以提高效率。
第二种需求可以采用xmlhttp远程获取。



用层做容器

  引用:#content { overflow:auto; height:200px; width:600px; background:#f00;}

效果演示源代码:



用body做容器

  引用:html { overflow:hidden; height:100%; background:#fff; border:0;}
* html { padding:100px 0 0 100px;}
body { overflow:scroll; background:#f00; margin:0; position:absolute; top:100px; left:100px; bottom:0; right:0;}
* html body { height:100%; width:100%;}


效果演示源代码:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)





滚动条在外边

  引用:html { overflow:hidden; border:0; height:100%; max-height:100%;}
body { overflow:hidden; margin:0; height:100%; max-height:100%; position:relative;}

#head { position:absolute; top:0; right:15px; width:100%; height:100px; background:#f00; z-index:2;}
#foot { position:absolute; bottom:0; right:15px; width:100%; background:#f00; height:50px;z-index:2;}

#content { height:100%; position:relative; z-index:1; overflow:auto;}


效果演示源代码:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)




滚动条在里边

  引用:html { height:100%; max-height:100%; border:0; overflow:hidden;}
* html { padding:100px 0 50px 0;}
body { height:100%; max-height:100%; margin:0; overflow:hidden;}

#content { position:absolute; top:100px; bottom:50px; left:0; right:0; z-index:3; width:100%; overflow:auto;}
* html #content { top:100px; bottom:0; height:100%;}

#head { position:absolute; margin:0; top:0; left:0; width:100%; height:100px; background:#f00; z-index:5;}
#foot { position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background:#f00;}


效果演示代码:




在IE6.0和FF1.5环境下测试通过

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

展开更多 50%)
分享

猜你喜欢

超强用CSS构建iframe效果

Web开发
超强用CSS构建iframe效果

网页制作:使用css设置iframe样式

Web开发
网页制作:使用css设置iframe样式

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS简单实例:用css来实现透视效果

Web开发
CSS简单实例:用css来实现透视效果

用Ant构建JavaScript组件

Web开发
用Ant构建JavaScript组件

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

构建网站合理规划CSS文件

Web开发
构建网站合理规划CSS文件

实现透视效果用css来实现

Web开发
实现透视效果用css来实现

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Windows 8系统如何进行系统配置

Windows 8系统如何进行系统配置

jquery全选,jquery全不选,jquery反选

jquery全选,jquery全不选,jquery反选
下拉加载更多内容 ↓