效果演示源代码:
!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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title用CSS构建iframe效果 - Css Iframe - RexSong.com/titlestyle* { 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;}/stylescript src="http://www.google-analytics.com/urchin.js" type="text/javascript"/scriptscript type="text/javascript"_uacct = "UA-67927-3";urchinTracker();/script/headbodydiv id="info" h4 style="font-weight:bold; margin-top:0;"用CSS构建iframe效果/h4 p来自:a href="http://homepage.yesky.com"天极网页陶吧/a/p pA. 直接模拟iframe,用body做容器/p/div p·a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml"仅用css编写无限分级弹出菜单/abr / ·a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml"浏览器滚动条的参数总结/abr / ·a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml"引入css样式表的四种方式介绍/abr / ·a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml"两种方式实现的文字竖排效果/abr / ·a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml"网页设计高级布局40例参考/abr /·a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml"从GMail认识W3C标准和Ajax/a/p /body/html 滚动条在外边
!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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title用CSS构建iframe效果 - Css Iframe - RexSong.com/titlestyle* { 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;}/stylescript type="text/javascript"_uacct = "UA-67927-3";urchinTracker();/script/headbodydiv id="head" div style=" padding:12px 0 0 26px;_padding:6px 0 0 26px;" h4 style="font-weight:bold; margin-top:0;"用CSS构建iframe效果/h4p来自:a href="http://homepage.yesky.com/" target="_self"天极网页陶吧/a/p pB. 绝对定位模拟iframe,滚动条在外边/p /div/divdiv id="content" p·a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml"仅用css编写无限分级弹出菜单/abr / ·a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml"浏览器滚动条的参数总结/abr / ·a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml"引入css样式表的四种方式介绍/abr / ·a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml"两种方式实现的文字竖排效果/abr / ·a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml"网页设计高级布局40例参考/abr /·a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml"从GMail认识W3C标准和Ajax/a/p/div/body/html 滚动条在里边
效果演示代码:
!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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title用CSS构建iframe效果 - Css Iframe - RexSong.com/titlestyle 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;}/stylescript type="text/javascript"_uacct = "UA-67927-3";urchinTracker();/script/headbodydiv id="head"div style=" padding:12px 0 0 10px;_padding:6px 0 0 10px;"h4 style="font-weight:bold; margin-top:0;"用CSS构建iframe效果/h4p来自:a href="http://homepage.yesky.com/" target="_self"天极网页陶吧/a/ppB. 绝对定位模拟iframe,滚动条在里边/p/div/divdiv id="content"p·a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml"仅用css编写无限分级弹出菜单/abr / ·a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml"浏览器滚动条的参数总结/abr / ·a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml"引入css样式表的四种方式介绍/abr / ·a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml"两种方式实现的文字竖排效果/abr / ·a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml"网页设计高级布局40例参考/abr /·a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml"从GMail认识W3C标准和Ajax/a/p/div/body/html 在IE6.0和FF1.5环境下测试通过