Gunakan CSS untuk membina kod kesan iframe_Pertukaran pengalaman

aplikasi iframe adalah sangat biasa, dan terdapat dua keperluan biasa:

1 Untuk mendapatkan kesan iframe, ia perlu membawa bar skrol, yang boleh menjimatkan banyak ruang.
2. Benamkan halaman untuk melaksanakan pemautan bingkai.

Jika tidak senang menggunakan iframe, anda boleh mendapatkan penyelesaian berikut:

Jika kami menggunakan reka letak css untuk melaksanakan keperluan pertama, kami boleh menyimpan satu halaman dan meningkatkan kecekapan.
Keperluan kedua boleh diperolehi dari jauh menggunakan xmlhttp.

A. Simulasi iframe secara langsung

Gunakan lapisan sebagai bekas
#content { overflow:auto; width:600px; >Kod sumber demonstrasi kesan:

Bina kesan iframe dengan 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; border:0; height:100%;} body { overflow:hidden; height:100%;} #content { overflow:auto; height:185px; width:600px; background:#ccc; padding:10px;} </style> Bina kesan iframe dengan CSS <h4 style="font-weight:bold;">Dari: </h4>Rangkaian Pengajaran Web<p><a href="http://www.webjx.com/" target="_self"> </a>A. Simulasi iframe secara langsung dan gunakan lapisan sebagai bekas </p> <p> </p>·<div id="content">Tulis menu pop timbul hierarki tanpa had menggunakan hanya css<p> ·<a class="grey-s" href="http://www.webjx.com/485/2354485.shtml">Ringkasan parameter bar skrol penyemak imbas</a> ·<a class="grey-s" href="http://www.webjx.com/442/2354442.shtml">Pengenalan kepada empat cara untuk memperkenalkan helaian gaya css</a> ·<a class="grey-s" href="http://www.webjx.com/436/2354436.shtml">Kesan susunan menegak teks dicapai dalam dua cara</a> ·<a class="grey-s" href="http://www.webjx.com/424/2354424.shtml">40 contoh reka letak lanjutan untuk reka bentuk web</a> ·<a class="grey-s" href="http://www.webjx.com/336/2352836.shtml">Ketahui tentang piawaian W3C dan Ajax daripada GMail</a><a class="grey-s" href="http://www.webjx.com/251/2352751.shtml"> </a> </p> </div>
[Ctrl+A Pilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan ] Gunakan badan sebagai bekas

html { overflow:hidden; tinggi: 100%; latar belakang:#fff; ; latar belakang:#f00 ; margin:0; atas: 100px; 🎜>Kod sumber demonstrasi kesan:

Bina kesan iframe dengan 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>Bina kesan iframe dengan CSS Dari: <div id="info">Rangkaian Pengajaran Web<h4 style="font-weight:bold; margin-top:0;"></h4> <p>A. Simulasikan iframe secara langsung dan gunakan badan sebagai bekas<a href="http://www.webjx.com"> </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需刷新才能执行]