iframe內聯框架 html5
阿新 • • 發佈:2018-12-03
學習要點:
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>