网页制作:使用css设置iframe样式

2016-02-19 14:17 7 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐网页制作:使用css设置iframe样式,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - Web开发 】

iframe应用很普遍,通常的需求有两种:

  1. 获取iframe效果,就是带一个滚动条,可以省不少版面。

  2. 要嵌一个页面,实现框架链接。

  如果不方便使用iframe,可以有如下相应解决方案:

  1. 可以使用css布局来实现,即可以少一个页面,也可以提高执行效率。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  2. 可以采用xmlhttp远程获取数据。

  A. 直接模拟iframe

  用层做容器

  #content { overflow:auto; height:185px; width:600px; background:#ccc; padding:10px;}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  效果演示:http://www.rexsong.com/blog/attachments/200601/02_150246_cssiframe1.htm

  用body做容器

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

  效果演示:http://www.rexsong.com/blog/attachments/200601/02_151517_cssiframe2.htm

  B. 绝对定位模拟iframe

  滚动条在外边

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

  效果演示:http://www.rexsong.com/blog/attachments/200601/02_151837_cssiframe3.htm

  滚动条在里边

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

  效果演示:http://www.rexsong.com/blog/attachments/200601/02_153241_cssiframe4.htm

  强调一下,standard模式要把body看作是一个容器,基本和div类似,这和传统观念是很不一样。搞清楚了html与body的关系,关于高级布局的很多问题自然迎刃而解。

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

延伸阅读
    用W3C标准建造的网站,从理论上来说可以做到完全的表现与结构相分离。打个比方,就是可以在不动骨架(结构,XHMTL)和肌肉(行为,Javascript)的前提下,彻彻底底地换一身皮(表现,CSS)。      当然,换皮之前你需要先按W3C标准建好你的网站,并且为它准备两套表现不一样的CSS。“换皮”实质上就是...
标签: Web开发
样式与数据分离所带来的不只是符合标准这样的简单,样式既然与数据分离那么样式的切换则变得理所当然的了!但是网上这样的中文教程实在是太少了!收集了一部分中外网站已经实现的技术资料整理出来供网友参考。 首先要具备不同内容的CSS文件(最好每个文件代表一种样式,或是代表需要作出变动的部分)。这里以三个为例: 第一个...
标签: Web开发
发现很多朋友对 CSS 的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS 代码,是否合理?是否优化? CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以 Specificity 的高低判断 CSS 的优先权。 Specifi...
标签: Web开发
从技术上讲,你可以将样式您想要的位置。 不过, HTML规范的建议,将他们放在文件头标记。 主要的好处是,您的网页加载速度似乎更快一些。 head       title应把所有CSS样式都放在Head Tag - www.webjx.com/title       link rel="s...
标签: Web开发
在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理:div style=clear:both;/div。 例如: div style=background:#666;       div style=float:left; width:30%; height:40px;background:#EEE; Some Content/div /div 此时预览此代码,我们会发现最外层的父元素float container,并没有显示。这...

经验教程

629

收藏

36
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部