效果演示源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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> </head> <body> <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://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><br /> ·<a class="grey-s" href="htt</p><p align='center'><b><a href='/webmake/css/200701/20070102014711_24052_3.html'>上一页</a> <a href='/webmake/css/200701/20070102014711_24052.html'>[1]</a> <a href='/webmake/css/200701/20070102014711_24052_2.html'>[2]</a> <a href='/webmake/css/200701/20070102014711_24052_3.html'>[3]</a> <font color='red'>[4]</font> <a href='/webmake/css/200701/20070102014711_24052_5.html'>[5]</a> <a href='/webmake/css/200701/20070102014711_24052_6.html'>[6]</a> <a href='/webmake/css/200701/20070102014711_24052_7.html'>[7]</a> <a href='/webmake/css/200701/20070102014711_24052_5.html'>下一页</a> </b></p></td> </tr> </table> </td> </tr> </table> <table class=center_tdbgall id=table7 cellSpacing=0 cellPadding=0 width=570 border=0> <tr> <td align=middle> <script language="javascript" src="/ads/cntuba-ads/dn/y2.js"></script></td> </tr> <tr> <td background=/Skin/sealove/line01.gif height=1></td> </tr> <tr> <td height=2></td> </tr> <tr> <td align=middle> <script language="javascript" src="/ads/cntuba-ads/dn/y3.js"></script></td> </tr> </table> </td> <td width=1 bgColor=#888888></td> <td width=4></td> <td width=1 bgColor=#888888></td> <td vAlign=top width=200> <table cellSpacing=0 cellPadding=0 width="100%" align=center border=0> <tr> <td align=middle> <script language="javascript" src="/ads/cntuba-ads/dn/y5.js"></script></td> </tr> <tr> <td height=5></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width="100%" align=center border=0> <tr> <td align=middle bgColor=#fab571 height=20><FONT color=#ffffff><STRONG>分类推荐</STRONG></FONT></td> </tr> <tr> <td align=middle><table height=216 cellSpacing=0 cellPadding=0 width="100%" align=center border=0> <tr align=middle bgColor=#fcfcf5> <td width=33 rowSpan=2><B><FONT color=#ff0000>社会</FONT></B></td> <td><A href="/News/List/List_17.html">社会</A></td> <td><A href="/News/List/List_18.html">娱乐</A></td> <td><A href="/News/List/List_19.html">军事</A></td> <td><A href="/News/List/List_20.html">校园</A></td> </tr> <tr align=middle bgColor=#fcfcf5> <td><A href="/humor/Index.html">幽默</A></td> <td><A href="/News/List/List_21.html">体育</A></td> <td><A href="/women/List/List_50.html">女性</A></td> <td><A href="/Article/Index.html">专题</A></td> </tr> <tr align=middle bgColor=#eff1f1> <td width=33 rowSpan=2><B><FONT color=#ff0000>电脑</FONT></B></td> <td><A href="/developer/Index.html">编程</A></td> <td><A href="/webmake/Index.html">网页</A></td> <td><A href="/software/Index.html">软件</A></td> <td><A href="/systems/Index.html">系统</A></td> </tr> <tr align=middle bgColor=#eff1f1> <td><A href="/computer/Index.html">安全</A></td> <td><A href="/picture/Index.html">图象</A></td> <td><A href="/internet/Index.html">冲浪</A></td> <td><A href="/exam/Index.html">认证</A></td> </tr> <tr align=middle bgColor=#f6fefc> <td width=33 rowSpan=2><B><FONT color=#ff0000>搞笑</FONT></B></td> <td><A href="/gaoxiao/List/List_31.html">人物</A></td> <td><A href="/gaoxiao/List/List_33.html">动物</A></td> <td><A href="/gaoxiao/List/List_34.html">物品</A></td> <td><A href="/gaoxiao/List/List_39.html">表情</A></td> </tr> <tr align=middle bgColor=#f6fefc> <td><A href="/gaoxiao/List/List_36.html">签名</A></td> <td><A href="/gaoxiao/List/List_32.html">色图</A></td> <td><A href="/gaoxiao/List/List_35.html">漫画</A></td> <td><A href="/gaoxiao/List/List_40.html">奇闻</A></td> </tr> <tr align=middle bgColor=#faf4fc> <td width=33 rowSpan=2><B><FONT color=#ff0000>美女</FONT></B></td> <td><A href="/girl/List/List_57.html">明星</A></td> <td><A href="/girl/List/List_58.html">清纯</A></td> <td><A href="/girl/List/List_60.html">自拍</A></td> <td><A href="/girl/List/List_62.html">欧美</A></td> </tr> <tr align=middle bgColor=#faf4fc> <td><A href="/girl/List/List_61.html">丝袜</A></td> <td><A href="/girl/List/List_64.html">卡通</A></td> <td><A href="/girl/List/List_59.html">性感</A></td> <td><A href="/girl/List/List_63.html">走光</A></td> </tr> <tr align=middle bgColor=#fdf5f5> <td width=33 rowSpan=2><B><FONT color=#ff0000>两性</FONT></B></td> <td><A href="/health/List/List_42.html">知识</A></td> <td><A href="/health/List/List_43.html">性图</A></td> <td><A href="/health/List/List_48.html">孕育</A></td> <td><A href="/health/List/List_44.html">技巧</A></td> </tr> <tr align=middle bgColor=#fdf5f5> <td><A href="/health/List/List_46.html">同性</A></td> <td><A href="/health/List/List_47.html">单身</A></td> <td><A href="/health/List/List_49.html">情感</A></td> <td><A href="/health/List/List_45.html">实录</A></td> </tr> <tr align=middle bgColor=#f3f8fb> <td width=33 rowSpan=2><B><FONT color=#ff0000>视频</FONT></B></td> <td><A href="/movie/List/List_10.html">写真</A></td> <td><A href="/movie/List/List_9.html">搞笑</A></td> <td><A href="/movie/List/List_11.html">MTV</A></td> <td><A href="/movie/List/List_15.html">翻唱</A></td> </tr> <tr align=middle bgColor=#f3f8fb> <td><A href="/movie/List/List_12.html">写实</A></td> <td><A href="/movie/List/List_13.html">片段</A></td> <td><A href="/movie/List/List_14.html">游戏</A></td> <td><A href="/movie/List/List_16.html">综艺</A></td> </tr> </table></td> </tr> <tr> <td height=5></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width="100%" align=center border=0> <tr> <td align=middle bgColor=#82b3ce height=20><FONT color=#ffffff><STRONG>CSS教程热门文章</STRONG></FONT></td> </tr> <tr> <td> <img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014738_24066.html" title="CSS垂直树形下拉菜单" target="_blank">CSS垂直树形下拉菜单</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014923_24119.html" title="CSS+JS实现的选项卡效果(html组件)" target="_blank">CSS+JS实现的选项卡效果(html组</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014816_24087.html" title="用CSS做滑动效果的图片画廊" target="_blank">用CSS做滑动效果的图片画廊</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014924_24120.html" title="用CSS设计高体验的表单显示效果示例" target="_blank">用CSS设计高体验的表单显示效果</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014906_24112.html" title="网页制作之常用CSS缩写语法总结" target="_blank">网页制作之常用CSS缩写语法总结</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014853_24105.html" title="CSS实现导航条图片的翻转菜单" target="_blank">CSS实现导航条图片的翻转菜单</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014845_24102.html" title="CSS仿淘宝首页导航条按钮布局效果" target="_blank">CSS仿淘宝首页导航条按钮布局效</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014711_24052.html" title="超强，用CSS构建iframe效果" target="_blank">超强，用CSS构建iframe效果</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014914_24116.html" title="完全CSS写的鼠标悬停tip效果" target="_blank">完全CSS写的鼠标悬停tip效果</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014911_24114.html" title="对css滑动门技术的一些总结和归纳" target="_blank">对css滑动门技术的一些总结和归</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014841_24099.html" title="用CSS层叠样式表完成可以控制的闪烁效果" target="_blank">用CSS层叠样式表完成可以控制的</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014832_24096.html" title="常用CSS" target="_blank">常用CSS</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014758_24076.html" title="CSS+DIV网页特效欣赏：非常酷的角BANNER" target="_blank">CSS+DIV网页特效欣赏：非常酷的</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014755_24074.html" title="CSS+DIV设计实例：纯CSS制作下拉导航菜单" target="_blank">CSS+DIV设计实例：纯CSS制作下</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014707_24047.html" title="CSS属性中Display与Visibility的不同" target="_blank">CSS属性中Display与Visibility</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014648_24039.html" title="利用CSS控制打印" target="_blank">利用CSS控制打印</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014925_24121.html" title="内联CSS的background-image属性图片相对路径设置失败" target="_blank">内联CSS的background-image属性</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014922_24118.html" title="导航上用CSS标志当前页效果的实现" target="_blank">导航上用CSS标志当前页效果的实</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014917_24117.html" title="CSS的常用技巧放送" target="_blank">CSS的常用技巧放送</a><br /><img src="/webmake/images/article_common4.gif" alt="普通教程"> <a class="" href="/webmake/css/200701/20070102014913_24115.html" title="XHTML+CSS兼容性解决方案小集" target="_blank">XHTML+CSS兼容性解决方案小集</a><br /></td> </tr> </table> </td> <td width=1 bgColor=#888888></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width=778 align=center bgColor=#ffffff border=0> <tr> <td bgColor=#888888 height=1></td> </tr> </table> <table cellSpacing=0 cellPadding=0 width=778 align=center bgColor=#ffffff border=0> <tr> <td height=5></td> </tr> <tr> <td align=middle> <script language='javascript' src='/ads/cntuba-ads/dn/y6.js'></script></td> </tr> </table> <!-- ********网页中部代码结束******** --><table cellSpacing=0 cellPadding=0 width=778 align=center bgColor=#f5f8fc border=0> <HR> <tr> <td class=menu_bottombg align=middle>| <A class=Bottom onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.cntuba.com');" href="#">设为首页</A> | <A class=Bottom href="javascript:window.external.addFavorite('http://www.cntuba.com','世纪中国');">加入收藏</A> | <A class=Bottom href="/ads/adlx.html" target=_blank>服务合作</A> | <A class=Bottom href="/FriendSite/Index.asp" target=_blank>友情链接</A> | <A class=Bottom href="/Copyright.asp" target=_blank>版权申明</A> | <A class=Bottom href="/ads/adlx.html" target=_blank>联系我们</A> | </td> </tr> <tr> <td class=bottom_bg vAlign=top height=50> <table height=35 cellSpacing=0 cellPadding=0 width="90%" align=center border=0> <tr> <td width=90 rowSpan=2> </td> <td width=90 rowSpan=2><IMG height=36 src="/Images1/gongan.gif" width=30 align=right border=0></td> <td align=middle width=418>广东广州海珠区 世纪网络工作室 版权所有 上海电信提供网络带宽</td> <td align=right width=180></td> </tr> <tr> <td align=middle width=378>信箱: 9297659@qq.com <A title="" href="http://www.miibeian.gov.cn/" target=_blank><FONT color=#ff0033>粤ICP备06113754号</FONT></A> <script src='http://s15.cnzz.com/stat.php?id=129463&web_id=129463' language='JavaScript' charset='gb2312'></script></td> <td align=right></td> </tr> </table> </td> </tr> </table> </body> </html>
