iframe内联框架 html5

最新推荐文章于 2024-05-08 23:56:12 发布

静水深流~

最新推荐文章于 2024-05-08 23:56:12 发布

阅读量847

点赞数 1

本文链接：https://blog.csdn.net/qq_41666208/article/details/81116749

版权

学习要点：

iframe元素用来在文档中添加一个内联框架

为body的子元素，必须在body中使用。

例：

添加一个百度的内联框架,点击京东会变成京东页面。

综合举例效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>内联框架和综合实例</title>
    <meta charset="utf-8">
    <style type="text/css">
    li{
        text-align: center;
    }
        </style>
</head>
<body style="background-color: blue;margin: 0px">
    <table style="height: 650px;width: 1340px;background-color: green;">
     <tr><td colspan="3" style="background-color: lightcoral;text-align:center;height:10%;color: blue;font-size: 19px">
      内联框架举例
     </td></tr>
     <tr><ul style="list-style-type: none"><td rowspan="3" style="background-color: cornsilk;width: 15%">
     <li><a href="1.html" target="myframe" target="myframe"><img src="image/he.jpg" style="width:20%;height:20%"><br>智障网</a><br>
     <br><li><a href="http://www.baidu.com" target="myframe"><img src="image/baidu.png" style="width:20%;height:20%"><br>百度网</a><br>
         <br><li><a href="http://www.jd.com" target="myframe"><img src="image/jd.png" style="width:20%;height:20%"><br>京东网</a><br>
         <br><li><a href="http://z.firefox.com.cn/2013/" target="myframe"><img src="image/hh.png" style="width:20%;height:20%"><br>火狐网</a><br>
     </ul></tr>
     <tr><td colspan="3" rowspan="3"><iframe src="http://www.baidu.com" style="width: 100%;height: 100%" name="myframe"></iframe></td></tr>
     <tr><td></td></tr>
     <!--<caption style="background-color: darkgray">内联框架举例</caption>-->
    <!--<a href="1.html" target="myframe">大傻子网</a><br>-->


    </table>
</body>
</html>