<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>
效果:
使用div布局和實例實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div布局</title> <style type="text/css"> body{ margin:0; padding: 0; width:100% auto; height:990px; /*border: 2px solid red;*/ font-size: 0px; } .firstpart { height: 10%; background-color: #3245ADFF; font-size: 25px; text-align: center; } .secondpart { height: 80%; background-color: gray; } .secondpart #left{ display: inline-block; width:20%; height: 100%; float: left; background-color: pink; } .secondpart #left ul{ margin-top: 60px; padding: 0; } .secondpart #left ul li{ width: 100%; height: 120px; align-self: center; } .secondpart #left #timg{ width: 90%; } .secondpart #right{ display: inline-block; width:80%; height: 100%; background-color: green; } .secondpart #right #myframe{ width: 100%; height: 100%; } .thirdpart { height: 10%; font-size: 25px; background-color: #3245ADFF; text-align: center; } </style> </head> <body> <div class="firstpart"> 《三國演義》是中日兩國合作制作的動畫片，已於2009年在中國上映。該動畫片是根據中國古代名著《三國演義》改編，由北京輝煌動畫、央視動畫與日本未來行星株式會社聯手打造的高清動畫。 </div> <div class="secondpart"> <div id="left"> <ul style="list-style: none"> <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" id="timg"></a></li> </ul> </div> <div id="right"> <iframe src="http://www.baidu.com" name="myframe" id="myframe"> </iframe> </div> </div> <div class="thirdpart"> 《紅樓夢》，中國古代章回體長篇小說，又名《石頭記》等，被列為中國古典四大名著之首，一般認為是清代作家曹雪芹所著。小說以賈、史、王、薛四大家族的興衰為背景，以富貴公子賈寶玉為視角，描繪了一批舉止見識出於須眉之上的閨閣佳人的人生百態，展現了真正的人性美和悲劇美，可以說是一部從各個角度展現女性美的史詩。 </div> </body> </html>
素材：
