进入旧版 | 服务项目 | 成功案例 | 联系方式 | 过客留言 | 友情链接
   
设为首页
加入收藏
联系我们
网站首页 | 新闻资讯 | 操作系统 | 办公软件 | 网络软件 | 工具软件 | 媒体动画 | 网页制作 | 网站开发 | 程序开发 | 平面设计
Photoshop视频教程 | Word入门 | Flash入门 | JScript | VBScript | ASP | PHP | ADO | 网页特效 | 3DS MAX6.0命令 | 系统进程
您当前的位置:GOODSGY电脑学习网 -> 网页制作 -> HTML/CSS -> 文章内容  
网页制作:使用css设置iframe样式

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

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

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

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

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

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

  A. 直接模拟iframewww.goodsgy.com

  用层做容器www.goodsgy.com

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

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

  用body做容器www.goodsgy.com

  html { overflow:hidden; height:100%; background:#fff; border:0;}www.goodsgy.com

  * html { padding:200px 0 0 100px;}www.goodsgy.com

  body { overflow:auto; background:#ccc; margin:0; position:absolute; top:200px; left:100px; bottom:0; right:0;}www.goodsgy.com

  * html body { height:100%; width:100%; position:static;}www.goodsgy.com

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

  B. 绝对定位模拟iframewww.goodsgy.com

  滚动条在外边www.goodsgy.com

  html { overflow:hidden; border:0; height:100%;}www.goodsgy.com

  body { overflow:hidden; margin:0; height:100%; position:relative;}www.goodsgy.com

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

  #head { position:absolute; top:0; right:16px; width:100%; height:100px; background:#ccc; z-index:2;}www.goodsgy.com

  #foot { position:absolute; bottom:0; right:16px; width:100%; background:#ccc; height:50px;z-index:2;}www.goodsgy.com

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

  滚动条在里边www.goodsgy.com

  html { height:100%; max-height:100%; border:0; overflow:hidden;}www.goodsgy.com

  * html { padding:100px 0 50px 0;}www.goodsgy.com

  body { height:100%; max-height:100%; margin:0; overflow:hidden;}www.goodsgy.com

  #content { position:absolute; top:100px; bottom:50px; left:0; right:0; z-index:3; width:100%; overflow:auto;}www.goodsgy.com

  * html #content { top:100px; bottom:0; height:100%;}www.goodsgy.com

  #head { position:absolute; margin:0; top:0; left:0; width:100%; height:100px; background:#ccc; z-index:5;}www.goodsgy.com

  #foot { position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background:#ccc;}www.goodsgy.com

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

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

在百度中搜索:网页制作:使用css设置iframe样式
在Google中搜索:网页制作:使用css设置iframe样式
在Yahoo中搜索:网页制作:使用css设置iframe样式

收藏到网摘:新浪VIVI 365key 我摘 POCO网摘 博采中心 YouNote 和讯网摘 天天收藏
[] [返回上一页] [打 印] [收 藏]

 相关文章    最新文章
· 过来人谈如何快速成为一名网页设计师
· DIV+CSS建立标准WEB网页的好处
· 网页排版中10种致命的语义错误
· 详细解读标准网页中的Meta标签
· 网页设计:关于CSS框架网页的设计
· CSS设计网页时的一些常用规范
· CSS教程:网页中Span和Div的区别
· 网页设计者优化网页应该从三个方面下手
· [图文] 网页标准制作:使用ul多行多列布局..
· 网页设计中CSS关联调用的4种方式
 
· DIV+CSS建立标准WEB网页的好处
· CSS教程:表格的nobr终极解决方案
· CSS Alpha透明代码相关知识学习
· 凶手loose.dtd导致CSS样式表失效
· 让IE浏览器显示透明PNG图片
· 网页排版中10种致命的语义错误
· 学习CSS的背景图像属性background
· CSS高级应用:定义列表的特殊用法
· CSS中Background Images属性详解
· 详细解读标准网页中的Meta标签

∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论…]
站内搜索

精彩图文
  网站导航  
操作系统 办公软件 网络软件
Vista Windows2003 WindowsXP Windows2000/NT Windows9X/ME Linux 其他 Word Excel Powerpoint Outlook 金山系列 其他 网页浏览 上传下载 联络聊天 邮件工具 服务器软件 网络辅助
工具软件 媒体动画 网页制作
系统工具 媒体工具 压缩工具 图文处理 文件管理 其他 3DMAX Authorware Director Maya 视频处理 其他 Flash Dreamweaver FireWorks FrontPage LiveMotion Golive HTML/CSS 其它
网站开发 平面设计 程序设计
ASP JSP PHP CGI JavaScript VBScript XML/SOAP Web服务器 Photoshop PhotoImpact CorelDraw Illustrator Freehand 设计欣赏 其他 VB VC .NET C/C++ DELPHI JAVA

冀ICP备05019428号
Copyright © 2004-2008 电脑学习网 Inc.All rights reserved.
TEL:13832340607
QQ:39873155
E_Mail:goodsgy(#)hotmail.com   (把(#)替换成@)
MSN:goodsgy(#)hotmail.com   (把(#)替换成@)