<!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 target="myiframe">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/bd.png" alt="百度">
</a>
</li>
<br/>
<br/>
<br/>
<li>
<a target="myiframe">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/tb.png" alt="淘宝">
</a>
</li>
<br/>
<br/>
<br/>
<li>
<a target="myiframe">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/jd.png" alt="京东">
</a>
</li>
</ul>
</div>
<div style="width:75%;height:80%;float:left;" align="center">
<iframe class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.baidu.com" width="100%" height="100%" name="myiframe">
</iframe>
</div>
<div style="width:100%;height:10%;background:green;clear:left;">
<br/>
<br/>
   
备注：本网站仅供观赏
</div>
</div>
</body>
</html>點(diǎn)擊查看更多內(nèi)容
4人點(diǎn)贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦