技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> html中frameset、frame、iframe框架用法小结

html中frameset、frame、iframe框架用法小结

浏览:1623次  出处信息

   本文总结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技术博客大学习
<< 前一篇：说说基本的布局观
后一篇：了解CSS中的@ AT规则 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1