1. 程式人生 > >iframe內聯框架 html5

iframe內聯框架 html5

學習要點:

iframe元素用來在文件中新增一個內聯框架

為body的子元素,必須在body中使用

例:

新增一個百度的內聯框架,點選京東會變成京東頁面。

<iframe src="http://www.baidu.com"></iframe>

<a href="http://www.jd.com">京東</a>

綜合舉例效果如下:

程式碼如下:

<!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>