仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1295|回复: 10
打印 上一主题 下一主题

[DIV+CSS] 来讲讲:网页制造:利用css设置iframe款式

[复制链接]
第二个灵魂 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:17:59 | 显示全部楼层 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
iframe使用很广泛,一般的需求有两种:  1.猎取iframe效果,就是带一个转动条,能够省很多版面。
  2.要嵌一个页面,完成框架链接。
  假如不便利利用iframe,能够有以下响应办理计划:
  1.可使用css结构来完成,便可以少一个页面,也能够进步实行效力。
  2.能够接纳xmlhttp远程猎取数据。
  A.间接摹拟iframe
  用层做容器
  #content{overflow:auto;height:185px;width:600px;background:#ccc;padding:10px;}
  效果演示:http://www.rexsong.com/blog/attachments/200601/02_150246_cssiframe1.htm
  用body做容器
  html{overflow:hidden;height:100%;background:#fff;border:0;}
  *html{padding:200px00100px;}
  body{overflow:auto;background:#ccc;margin:0;position:absolute;top:200px;left:100px;bottom:0;right:0;}
  *htmlbody{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:100px050px0;}
  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的干系,关于初级结构的良多成绩天然水到渠成。

你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。
第二个灵魂 该用户已被删除
沙发
 楼主| 发表于 2015-3-17 10:10:28 | 显示全部楼层
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-18 06:43

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表