html中frameset、frame、iframe框架用法小结
浏览:1575次 出处信息
本文总结html中与框架相关的三个标签frameset、frame、iframe的用法,下面是一些简单的代码示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>测试</title> </head> <frameset cols="25%,50%,25%"> <frame src="http://www.baidu.com/" noresize="noresize" /> <frameset rows="25%,50%,*"> <frame src="http://www.admin5.com/" /> <frame src="http://www.hand-china.com/" /> <frame src="http://yedward.net/" /> </frameset> <frame src="http://yedward.net/" /> <noframes> <body>您的浏览器无法处理框架</body> </noframes> </frameset> </html>
注意,frameset不能和body在一起用。另外,如果浏览器不支持frameset、frame、iframe等标签,建议加上noframes标签,显示提示用户的内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>测试</title> <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css"> <script type="text/javascript" src="ext4/ext-all.js"></script> </head> <frameset cols="10%,*" rows="100%"> <frame src="navi.html" noresize="noresize" /> <frame src="content.html" name="content"/> <noframes> <body>您的浏览器无法处理框架!</body> </noframes> </frameset> </html>
下面是各个页面:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>navi.html</title> </head> <body> <ul> <li><a href="http://www.baidu.com/" target="content">百度</a></li> <li><a href="http://www.qq.com/" target="content">腾讯</a></li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>content.html</title> <style type="text/css"> html, body { margin : 0; width : 100%; height : 100%; } </style> </head> <body> <iframe src="http://yedward.net/" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe> </body> </html>
注意使用iframe的时候,想要height="100%"生效,需要设置它的父容器的height="100%",否则会有问题!
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:说说基本的布局观
后一篇:了解CSS中的@ AT规则 >>
文章信息
- 作者:叶德华的博客 来源: 叶德华的博客
- 标签: frameset、frame、i
- 发布时间:2016-02-11 23:04:15
近3天十大热文
- [54] IOS安全–浅谈关于IOS加固的几种方法
- [52] android 开发入门
- [52] 如何拿下简短的域名
- [51] 图书馆的世界纪录
- [49] Go Reflect 性能
- [49] Oracle MTS模式下 进程地址与会话信
- [47] 【社会化设计】自我(self)部分――欢迎区
- [46] 读书笔记-壹百度:百度十年千倍的29条法则
- [36] 程序员技术练级攻略
- [29] 视觉调整-设计师 vs. 逻辑