设为首页 收藏本站

QQ登录

只需一步，快速开始

切换到宽版 切换风格

电脑疯子技术论坛|电脑极客社区

电脑疯子技术论坛|电脑极客社区»技术论坛 › 电脑疯子|资源分享 › 电脑教程分享 › 帖子
微信扫一扫 分享朋友圈

已有 2015 人浏览分享

用CSS构建iframe效果代码

[复制链接]
2015 0
iframe应用很普遍，通常的需求有两种：

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

如果不方便使用iframe，可以有如下解决方案：

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

A. 直接模拟iframe

用层做容器
#content { overflow:auto; height:200px; width:600px; background:#f00;}

效果演示源代码：

  1. [quote]iframe应用很普遍，通常的需求有两种：

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

  6. 如果不方便使用iframe，可以有如下解决方案：

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

  11. A. 直接模拟iframe

  13. 用层做容器
  14. #content { overflow:auto; height:200px; width:600px; background:#f00;}

  16. 效果演示源代码：[/quote]
复制代码


Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

用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%;}

效果演示源代码：

  1. 用body做容器
  2. html { overflow:hidden; height:100%; background:#fff; border:0;}
  3. * html { padding:100px 0 0 100px;}
  4. body { overflow:scroll; background:#f00; margin:0; position:absolute; top:100px; left:100px; bottom:0; right:0;}
  5. * html body { height:100%; width:100%;}
  6. 效果演示源代码：
复制代码


Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

B. 绝对定位模拟iframe

滚动条在外边

复制代码 代码如下:

  1. html { overflow:hidden; border:0; height:100%; max-height:100%;}
  2. body { overflow:hidden; margin:0; height:100%; max-height:100%; position:relative;}
  3. #head { position:absolute; top:0; right:15px; width:100%; height:100px; background:#f00; z-index:2;}
  4. #foot { position:absolute; bottom:0; right:15px; width:100%; background:#f00; height:50px;z-index:2;}
  5. #content { height:100%; position:relative; z-index:1; overflow:auto;}
复制代码


效果代码演示

  1. [quote]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title>
  6. <style>
  7. * { font:12px Arial;}
  8. html { overflow:hidden; border:0; height:100%;}
  9. body { overflow:hidden; margin:0; height:100%; position:relative;}
  10. #content { height:100%; position:relative; z-index:1; overflow:auto;}
  11. #head { position:absolute; top:0; right:16px; width:100%; height:100px; background:#ccc; z-index:2;}
  12. #foot { position:absolute; bottom:0; right:16px; width:100%; background:#ccc; height:50px;z-index:2;}
  13. </style>
  14. <script type="text/javascript">
  15. _uacct = "UA-67927-3";
  16. urchinTracker();
  17. </script>
  18. </head>
  19. <body>
  20. <div id="head">
  21. <div style=" padding:12px 0 0 26px;_padding:6px 0 0 26px;">
  22.   <h4 style="font-weight:bold; margin-top:0;">用CSS构建iframe效果</h4>
  23. <p>来自：网页教学网</p>
  24.   <p>B. 绝对定位模拟iframe，滚动条在外边</p>
  25. </div>
  26. </div>
  27. <div id="content">
  28. <p>·仅用css编写无限分级弹出菜单

  30.    ·浏览器滚动条的参数总结

  32.    ·引入css样式表的四种方式介绍

  34.    ·两种方式实现的文字竖排效果

  36.    ·网页设计高级布局40例参考

  38.     ·从GMail认识W3C标准和Ajax</p>
  39. </div>
  40. </body>
  41. </html>
  42. [/quote]
复制代码


滚动条在里边
复制代码 代码如下:

  1. html { height:100%; max-height:100%; border:0; overflow:hidden;}
  2. * html { padding:100px 0 50px 0;}
  3. body { height:100%; max-height:100%; margin:0; overflow:hidden;}
  4. #content { position:absolute; top:100px; bottom:50px; left:0; right:0; z-index:3; width:100%; overflow:auto;}
  5. * html #content { top:100px; bottom:0; height:100%;}
  6. #head { position:absolute; margin:0; top:0; left:0; width:100%; height:100px; background:#f00; z-index:5;}
  7. #foot { position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background:#f00;}
复制代码


效果演示代码：

  1. [quote]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title>
  6. <style type="text/css">
  7. * { font:12px Arial;}
  8. html { height:100%; max-height:100%; border:0; overflow:hidden;}
  9. * html { padding:100px 0 50px 0;}
  10. body { height:100%; max-height:100%; margin:0; overflow:hidden;}
  11. #content { position:absolute; top:100px; bottom:50px; left:0; right:0; z-index:3; width:100%; overflow:auto;}
  12. * html #content { top:100px; bottom:0; height:100%;}
  13. #head { position:absolute; margin:0; top:0; left:0; width:100%; height:100px; background:#ccc; z-index:5;}
  14. #foot { position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background:#ccc;}
  15. </style>
  16. <script type="text/javascript">
  17. _uacct = "UA-67927-3";
  18. urchinTracker();
  19. </script>
  20. </head>
  21. <body>
  22. <div id="head">
  23. <div style=" padding:12px 0 0 10px;_padding:6px 0 0 10px;">
  24.   <h4 style="font-weight:bold; margin-top:0;">用CSS构建iframe效果</h4>
  25. <p>来自：网页教学网</p>
  26.   <p>B. 绝对定位模拟iframe，滚动条在里边</p>
  27. </div>
  28. </div>
  29. <div id="content">
  30. <p>·仅用css编写无限分级弹出菜单

  32.    ·浏览器滚动条的参数总结

  34.    ·引入css样式表的四种方式介绍

  36.    ·两种方式实现的文字竖排效果

  38.    ·网页设计高级布局40例参考

  40.     ·从GMail认识W3C标准和Ajax</p>
  41. </div>
  42. </body>
  43. </html>
  44. [/quote]
复制代码



Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]







举报

回复
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

zhaorong
VIP荣誉会员

1

关注

0

粉丝

9021

主题
精彩推荐
电脑疯子 GHOST WIN7 X64 快速装机版202001
电脑疯子 GHOST WIN7 X64 快速装机版202001
电脑疯子技术论坛GHOST WIN10X64 快速装机版201909
电脑疯子技术论坛GHOST WIN10X64 快速装机
电脑疯子 GHOST WIN7 X86 快速装机版202001
电脑疯子 GHOST WIN7 X86 快速装机版202001
电脑疯子技术论坛GHOST WIN10X86 快速装机版201909
电脑疯子技术论坛GHOST WIN10X86 快速装机
热门资讯
网友晒图
图文推荐

Powered by Pcgho! X3.4

© 2008-2022 Pcgho Inc.