超强用CSS构建iframe效果

2016-02-19 14:33 242 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

滚动条在外边

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）引用: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环境下测试通过

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

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

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

用CSS实现给图片上色的效果

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

步骤是这样的： 1.先把你想要做的图片放到PS里面进行去色处理-图像–调整–去色或者ctrl+shift+u 2.将此图和原图片整合成上下两张的图片，如下图： 3.下一步写下代码： xhtml代码： div id="box" a href="#" span/span /a /div CSS代码： a {float:left;}#box s...

用javascript控制iframe滚动的代码

标签： Web开发

现在有一个横向的IFRAME,需要通过点击iframe外的一个图片来横向滚动iframe内的一个html页,但又不想让看见iframe的滚动条,请问如何解决啊???? img src="demo.gif" onmousedown="window.timer=setInterval('a.document.body.scrollTop++',10)" onmouseup="clearInterval(window.timer...

用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网页...

门户网站构建CSS框架的规则

标签： Web开发

对于大型门户，海量信息平台及多模块，多区域化网站，更需要对CSS，XHTML，的标准化，符合语意的HTML框架，复用性强的CSS代码，这些才能保障你的网站，具有很好的地基。第一部：关于构建CSS框架我们要实现的目的： 1.实现标准化，具备主流平台适应性的前端实现； 2.快速开发，在站点风格确定后，前端不应该成为整个项目里瓶颈； 3.重...

用CSS3做的各种网页效果

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

用纯CSS也可以实现各种各样很酷的效果了，甚至是动画。虽然有些效果不能跨浏览器(甚至是支持CSS3的浏览器)运行，有些只是展示并没什么实际用途，但仅用CSS实现出的这些效果似乎没什么可以挑剔的。对于设计人员和开发人员来说，CSS一直是web设计过程中重要的一部分，随着CSS3的出现以及越来越多的浏览器对它的支持，设计师们有了更多的选择...

查看更多精彩>>