div+iframe内联框架结构设计
2016-07-31 22:37:51 来源：慕课网
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>iframe内联框架</title></head><body style="margin:0"> <!--四周无边距--> <div style="width:100%;height:700px;"> <div style="width:100%;height:10%;background:DarkGray;" align="center"><br/> <h2>div+iframe内联框架</h2> </div> <div style="width:25%;height:80%;background:cornsilk;float:left;"> <ul style="list-style-type:none" align="right"> <!-- 去掉无序列表前面的点，居中写入 --> <br/> <br/> <br/> <br/> <br/> <li> <a href="http://www.baidu.com" rel="external nofollow" target="myiframe"> <img src="images/bd.png" rel="external nofollow" alt="百度"> </a> </li> <br/> <br/> <br/> <li> <a href="https://www.taobao.com" rel="external nofollow" target="myiframe"> <img src="images/tb.png" rel="external nofollow" alt="淘宝"> </a> </li> <br/> <br/> <br/> <li> <a href="http://www.jd.com" rel="external nofollow" target="myiframe"> <img src="images/jd.png" rel="external nofollow" alt="京东"> </a> </li> </ul> </div> <div style="width:75%;height:80%;float:left;" align="center"> <iframe src="http://www.baidu.com" rel="external nofollow" width="100%" height="100%" name="myiframe"> </iframe> </div> <div style="width:100%;height:10%;background:green;clear:left;"> <br/> <br/>     备注：本网站仅供观赏 </div> </div></body></html>
