Verwenden Sie CSS zum Erstellen von Iframe-Effekten_CSS/HTML

Iframe-Anwendungen sind sehr verbreitet und es gibt zwei gemeinsame Anforderungen:
1. Um den Iframe-Effekt zu erzielen, muss eine Bildlaufleiste vorhanden sein, die viel Platz sparen kann.
2. Betten Sie eine Seite ein, um die Frame-Verknüpfung zu implementieren.
Wenn die Verwendung von Iframe nicht bequem ist, können Sie die folgenden Lösungen verwenden:
Wenn wir das CSS-Layout verwenden, um die erste Anforderung zu implementieren, können wir eine Seite sparen und die Effizienz verbessern.
Die zweite Anforderung kann remote über xmlhttp abgerufen werden.
A. Iframe direkt simulieren
Ebenen als Container verwenden

Code kopieren Der Code ist wie folgt:

#content { overflow:auto; height:200px; width:#f00;}

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">Erstellen Sie einen Iframe-Effekt mit CSS – CSS Iframe – RexSong.com<title> </title> <style> * { font:12px Arial;} html { overflow:hidden; border:0; height:100%;} body { overflow:hidden; height:100%;} #content { overflow:auto; height:185px; width:600px; background:#ccc; padding:10px;} </style> Iframe-Effekt mit CSS erstellen<h4 style="font-weight:bold;"> </h4>Von: <p>Tianji Website Tao Bar<a href="http://homepage.yesky.com/" target="_self"></a> </p>A. Iframe direkt simulieren und Ebenen als Container verwenden <p> </p> <div id="content">·<p>Schreiben Sie unbegrenzte hierarchische Popup-Menüs nur mit CSS<a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml"> ·</a>Zusammenfassung der Browser-Bildlaufleistenparameter<a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml"> ·</a>Einführung in vier Möglichkeiten zur Einführung von CSS-Stylesheets<a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml"> ·</a>Der Effekt der vertikalen Textanordnung wird auf zwei Arten erreicht<a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml"> ·</a>40 Beispiele für erweiterte Layouts für Webdesign<a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml"> ·</a>Erfahren Sie mehr über W3C-Standards und Ajax von GMail<a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml"></a> </p> </div>
[Strg+A Alle auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ]

Verwenden Sie den Körper, um einen Container zu erstellen

Code kopieren Der Code lautet wie folgt:

html { overflow:hidden; height:100% ; background:#fff; border:0;}

* html { padding:100px 0 0 100px;}
body { overflow:scroll; 0; Position:absolut;oben:100px;unten:0;rechts:0;}

Erstellen Sie einen Iframe-Effekt mit CSS – CSS Iframe – RexSong.com <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style> * { font:12px Arial;} html { overflow:hidden; height:100%; background:#fff; border:0;} * html { padding:200px 0 0 100px;} body { overflow:auto; background:#ccc; margin:0; position:absolute; top:200px; left:100px; bottom:0; right:0;} * html body { height:100%; width:100%; position:static;} #info { position:fixed; top:10px; left:10px;} * html #info { position:absolute;} </style> Iframe-Effekt mit CSS erstellen <div id="info">Von: <h4 id="Tianji-Website-Tao-Bar">Tianji Website Tao Bar</h4> <p> <a href="http://homepage.yesky.com">A. Iframe direkt simulieren und Body als Container verwenden</a> </p> <p>·<a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a> ·<a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml">浏览器滚动条的参数总结</a> ·<a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml">引入css样式表的四种方式介绍</a> ·<a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml">两种方式实现的文字竖排效果</a> ·<a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml">网页设计高级布局40例参考</a> ·<a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p> <br><input onclick="runEx('runcode37847')" type="button" value="运行代码"> <input onclick="doCopy('runcode37847')" type="button" value="复制代码"> <input onclick="doSave(runcode37847)" type="button" value="保存代码">[Ctrl+A 全选 注:<a href="/article/23421.htm" title="查看具体详情" target="_blank">如需引入外部Js需刷新才能执行</a>]</div> <br>B. 绝对定位模拟iframe <br>滚动条在外边 <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="22139" class="copybut" id="copybut22139" onclick="doCopy('code22139')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code22139">html { overflow:hidden; border:0; height:100%; max-height:100%;} <br>body { overflow:hidden; margin:0; height:100%; max-height:100%; position:relative;} <br>#head { position:absolute; top:0; right:15px; width:100%; height:100px; background:#f00; z-index:2;} <br>#foot { position:absolute; bottom:0; right:15px; width:100%; background:#f00; height:50px;z-index:2;} <br>#content { height:100%; position:relative; z-index:1; overflow:auto;}  <br> </div> <br>效果演示源代码： <br><div class="htmlarea"> <textarea id="runcode92232"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title> <style> * { font:12px Arial;} html { overflow:hidden; border:0; height:100%;} body { overflow:hidden; margin:0; height:100%; position:relative;} #content { height:100%; position:relative; z-index:1; overflow:auto;} #head { position:absolute; top:0; right:16px; width:100%; height:100px; background:#ccc; z-index:2;} #foot { position:absolute; bottom:0; right:16px; width:100%; background:#ccc; height:50px;z-index:2;} </style> <script type="text/javascript"> _uacct = "UA-67927-3"; urchinTracker(); </script> <div id="head"> <div style=" padding:12px 0 0 26px;_padding:6px 0 0 26px;"> <h4 id="用CSS构建iframe效果">用CSS构建iframe效果</h4> <p>来自：<a href="http://homepage.yesky.com/" target="_self">天极网页陶吧</a></p> <p>B. 绝对定位模拟iframe，滚动条在外边</p> </div> </div> <div id="content"> <p>·<a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a> ·<a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml">浏览器滚动条的参数总结</a> ·<a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml">引入css样式表的四种方式介绍</a> ·<a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml">两种方式实现的文字竖排效果</a> ·<a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml">网页设计高级布局40例参考</a> ·<a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

滚动条在里边

复制代码 代码如下:

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title> <style type="text/css"> * { font:12px Arial;} 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:#ccc; z-index:5;} #foot { position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background:#ccc;} </style> <script type="text/javascript"> _uacct = "UA-67927-3"; urchinTracker(); </script> <div id="head"> <div style=" padding:12px 0 0 10px;_padding:6px 0 0 10px;"> <h4 id="用CSS构建iframe效果">用CSS构建iframe效果</h4> <p>来自：<a href="http://homepage.yesky.com/" target="_self">天极网页陶吧</a></p> <p>B. 绝对定位模拟iframe，滚动条在里边</p> </div> </div> <div id="content"> <p>·<a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a> ·<a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml">浏览器滚动条的参数总结</a> ·<a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml">引入css样式表的四种方式介绍</a> ·<a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml">两种方式实现的文字竖排效果</a> ·<a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml">网页设计高级布局40例参考</a> ·<a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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