超强，用CSS构建iframe效果(2)

分类: CSS 出处：iocblog整理更新时间：2009-01-06 添加到收藏

效果演示源代码：

<!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="http://homepage.yesky.com/442/2354442.shtml">浏览器滚动条的参数总结</a><br /> ・<a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml">引入css样式表的四种方式介绍</a><br /> ・<a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml">两种方式实现的文字竖排效果</a><br /> ・<a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml">网页设计高级布局40例参考</a><br /> ・<a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml">从gmail认识w3c标准和ajax</a></p> </div> </body> </html>

滚动条在里边

引用:

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

效果演示代码：(来源www.iocblog.net)

<!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 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/<a href="http://www.iocblog.net/java/" style="color:#ff0000;font-weight:bold;">java</a>script"> _uacct = "ua-67927-3"; urchintracker(); </script> </head> <body> <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://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="http://homepage.yesky.com/442/2354442.shtml">浏览器滚动条的参数总结</a><br /> ・<a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml">引入css样式表的四种方式介绍</a><br /> ・<a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml">两种方式实现的文字竖排效果</a><br /> ・<a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml">网页设计高级布局40例参考</a><br /> ・<a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml">从gmail认识w3c标准和ajax</a></p> </div> </body> </html>

在ie6.0和ff1.5环境下测试通过

上一页 [1] [2]

文章整理：iocblog
版权申明：本站文章均来自网络，如有侵权，请联系我们，我们收到后立即删除，谢谢！
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有。

热门文章

好运气