超强用CSS构建iframe效果

2016-02-19 14:33 247 1 收藏

下面这个超强用CSS构建iframe效果教程由图老师小编精心推荐选出，过程简单易学超容易上手，喜欢就要赶紧get起来哦！

【 tulaoshi.com - Web开发】

iframe应用很普遍，通常的需求有两种：

1，获取iframe效果，就是带一个滚动条，可以省不少版面。
2，要嵌一个页面，实现框架链接。

如果不方便使用iframe，可以有如下解决方案：

第一种需求如果我们使用css布局来实现，即可以少一个页面，也可以提高效率。
第二种需求可以采用xmlhttp远程获取。

用层做容器

引用:#content { overflow:auto; height:200px; width:600px; background:#f00;}
效果演示源代码：

!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; height:100%;}#content { overflow:auto; height:185px; width:600px; background:#ccc; padding:10px;}/style/headbodyh4 style="font-weight:bold;"用CSS构建iframe效果/h4p来自：a href="http://homepage.yesky.com/" target="_self"天极网页陶吧/a/ppA. 直接模拟iframe，用层做容器/pdiv 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

用body做容器

引用:html { overflow:hidden; height:100%; background:#fff; border:0;}
* html { padding:100px 0 0 100px;}
body { overflow:scroll; background:#f00; margin:0; position:absolute; top:100px; left:100px; bottom:0; right:0;}
* html body { height:100%; width:100%;}

效果演示源代码：

!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

滚动条在外边

引用:html { overflow:hidden; border:0; height:100%; max-height:100%;}
body { overflow:hidden; margin:0; height:100%; max-height:100%; position:relative;}

#head { position:absolute; top:0; right:15px; width:100%; height:100px; background:#f00; z-index:2;}
#foot { position:absolute; bottom:0; right:15px; width:100%; background:#f00; height:50px;z-index:2;}

#content { height:100%; position:relative; z-index:1; overflow:auto;}

效果演示源代码：

!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

滚动条在里边

引用: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;}

效果演示代码：

!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环境下测试通过

来源:http://www.tulaoshi.com/n/20160219/1607196.html

上一篇： Windows 8系统如何进行系统配置
下一篇： jquery全选,jquery全不选,jquery反选

看过《超强用CSS构建iframe效果》的人还看了以下文章更多>>

用js实现的抽象CSS圆角效果!!

标签： Web开发

大概是去年的时候吧,就在网上见过了现成的CSS圆角效果的CSS及HTML代码,例如: html head titlecss圆角效果/title meta http-equiv="content-type" content="text/html; charset=gb2312" style type="text/css" div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{display:block;background: ...

用CSS做滑动效果的图片画廊

标签： Web开发

代码如下：以下是引用片段： style #galleryh { padding:0; margin:0 auto 5em auto; list-style-type:none; overflow:hidden; width:495px; height:240px; border:1px solid #888; background:#fff url(/imagelist/06/24/o9642o826u4n.gif); } #galleryh li { ...

用JSP构建动态网站

标签： Java JAVA基础

用JSP构建动态网站孙以义杜鹃一、什么是JSP JSP(JavaServer Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准，其网址为http://www.javasoft.com/products/jsp。在传统的网页HTML文件(*.htm,*.html)中加入Java程序片段(Scriptlet)和JSP标记(tag)，就构成了JSP网页(*.jsp)。Web服务器在遇到访问JSP网页...

用javascript动态调整iframe高度的方法

标签： Web开发

当你在页面上使用了iframe之后，一般来说会不希望iframe显示难看的滚动条，以使iframe里面的内容和主页面的内容浑然一体。这时候你会设置 scrolling="no" 属性。但是这样一来如果iframe里面的内容是变化的，高度会随之内容的变化而变化的时候，你的iframe就会显得太长导致底下一大片空白，或者正好相反，由于iframe的高度太小导致一部...

用javascript动态调整iframe高度的代码