Verwenden Sie CSS, um den IFrame-Effektcode_Experience-Austausch zu erstellen

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
#content { overflow:auto; width:600px;}

Quellcode der Effektdemonstration:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Erstellen Sie einen Iframe-Effekt mit CSS – CSS Iframe – RexSong.com</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> <h4 style="font-weight:bold;">Iframe-Effekt mit CSS erstellen</h4> <p>Von: <a href="http://www.webjx.com/" target="_self">Web Teaching Network</a></p> <p>A. Iframe direkt simulieren und Ebenen als Container verwenden </p> <div id="content"> <p>·<a class="grey-s" href="http://www.webjx.com/485/2354485.shtml">Schreiben Sie unbegrenzte hierarchische Popup-Menüs nur mit CSS</a> ·<a class="grey-s" href="http://www.webjx.com/442/2354442.shtml">Zusammenfassung der Browser-Bildlaufleistenparameter</a> ·<a class="grey-s" href="http://www.webjx.com/436/2354436.shtml">Einführung in vier Möglichkeiten zur Einführung von CSS-Stylesheets</a> ·<a class="grey-s" href="http://www.webjx.com/424/2354424.shtml">Der Effekt der vertikalen Textanordnung wird auf zwei Arten erreicht</a> ·<a class="grey-s" href="http://www.webjx.com/336/2352836.shtml">40 Beispiele für erweiterte Layouts für Webdesign</a> ·<a class="grey-s" href="http://www.webjx.com/251/2352751.shtml">Erfahren Sie mehr über W3C-Standards und Ajax von GMail</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 Textkörper als Container ; Hintergrund:#f00; Position:absolut;oben:100px;unten:0;} 🎜>Quellcode der Effektdemonstration:

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 style="font-weight:bold; margin-top:0;">Web Teaching Network</h4> <p> <a href="http://www.webjx.com">A. Iframe direkt simulieren und Body als Container verwenden</a> </p> <p>·<a class="grey-s" href="http://www.webjx.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a> ·<a class="grey-s" href="http://www.webjx.com/442/2354442.shtml">浏览器滚动条的参数总结</a> ·<a class="grey-s" href="http://www.webjx.com/436/2354436.shtml">引入css样式表的四种方式介绍</a> ·<a class="grey-s" href="http://www.webjx.com/424/2354424.shtml">两种方式实现的文字竖排效果</a> ·<a class="grey-s" href="http://www.webjx.com/336/2352836.shtml">网页设计高级布局40例参考</a> ·<a class="grey-s" href="http://www.webjx.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p> <br><input onclick="runEx('runcode9325')" type="button" value="运行代码"> <input onclick="doCopy('runcode9325')" type="button" value="复制代码"> <input onclick="doSave(runcode9325)" type="button" value="保存代码">[Ctrl+A 全选 注:<a href="/article/23421.htm" title="查看具体详情" target="_blank">如需引入外部Js需刷新才能执行</a>]</div> <br>B. 绝对定位模拟iframe <br><br>滚动条在外边 <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="96839" class="copybut" id="copybut96839" onclick="doCopy('code96839')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code96839"> <br>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="runcode87299"> <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 style="font-weight:bold; margin-top:0;">用CSS构建iframe效果</h4> <p>来自：<a href="http://www.webjx.com/" target="_self">网页教学网</a></p> <p>B. 绝对定位模拟iframe，滚动条在外边</p> </div> </div> <div id="content"> <p>·<a class="grey-s" href="http://www.webjx.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a> ·<a class="grey-s" href="http://www.webjx.com/442/2354442.shtml">浏览器滚动条的参数总结</a> ·<a class="grey-s" href="http://www.webjx.com/436/2354436.shtml">引入css样式表的四种方式介绍</a> ·<a class="grey-s" href="http://www.webjx.com/424/2354424.shtml">两种方式实现的文字竖排效果</a> ·<a class="grey-s" href="http://www.webjx.com/336/2352836.shtml">网页设计高级布局40例参考</a> ·<a class="grey-s" href="http://www.webjx.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 style="font-weight:bold; margin-top:0;">用CSS构建iframe效果</h4> <p>来自：<a href="http://www.webjx.com/" target="_self">网页教学网</a></p> <p>B. 绝对定位模拟iframe，滚动条在里边</p> </div> </div> <div id="content"> <p>·<a class="grey-s" href="http://www.webjx.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a> ·<a class="grey-s" href="http://www.webjx.com/442/2354442.shtml">浏览器滚动条的参数总结</a> ·<a class="grey-s" href="http://www.webjx.com/436/2354436.shtml">引入css样式表的四种方式介绍</a> ·<a class="grey-s" href="http://www.webjx.com/424/2354424.shtml">两种方式实现的文字竖排效果</a> ·<a class="grey-s" href="http://www.webjx.com/336/2352836.shtml">网页设计高级布局40例参考</a> ·<a class="grey-s" href="http://www.webjx.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p> </div>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]