Iframe框架+table佈局
阿新 • • 發佈：2018-12-18
<td colspan="2" style="width: 80%"> <iframe src="http://www.baidu.com" width="100%" height="100%" name="myframe"></iframe> </td>
原始碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=”viewport” content=”width=device-width,initial-scale=1″ /> <title>tb佈局</title> <style type="text/css"> body{ height:100% auto; width:100% auto; } table{ height: 990px; width: 100%; } </style> </head> <body > <table> <tr style="background-color: red;height:10%"> <td colspan="3" style="height: 10%;width: 100%;font-size:30px;text-align: center" >我覺得一般吧，甚至有點難聽，卜凡的拉普有點尬，嶽明輝一如既往的油……</td> </tr> <tr style="height:80%;background-color: gray"><td style="width:20%;color: green"> <ul style="list-style:none;line-height: 100px"> <li><a href="http://www.baidu.com" target="myframe"><img src="img/bd.gif"></a></li> <li><a href="https://www.ifeng.com/" target="myframe"><img src="img/fh.gif"></a></li> <li><a href="http://www.jd.com" target="myframe"><img src="img/jd.gif"></a></li> <li><a href="http://www.taobao.com" target="myframe"><img src="img/tb.gif"></a></li> <li><a href="https://www.sina.com.cn/" target="myframe"><img src="img/xl.gif"></a></li> <li><a href="http://www.51zxw.com" target="myframe"><img src="img/我要自學網.png"></a></li> </ul> </td> <td colspan="2" style="width: 80%"> <iframe src="http://www.baidu.com" width="100%" height="100%" name="myframe"></iframe> </td> </tr> <tr style="background-color: pink;height:10%"> <td colspan="3" style="font-size:30px;text-align: center ">由於網頁會根據螢幕寬度調整佈局，所以不能使用絕對寬度的佈局，也不能使用具有絕對寬度的元素。這一條非常重要。 </td> </tr> </table> </body> </html>
效果:
