为了账号安全,请及时绑定邮箱和手机立即绑定

div+iframe内联框架结构设计

标签:
Html/CSS
<!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" 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 href="https://www.taobao.com" 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 href="http://www.jd.com" 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/>
            &nbsp&nbsp&nbsp
            备注:本网站仅供观赏
        </div>
    </div>
</body>
</html>
点击查看更多内容
4人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
5
获赞与收藏
28

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消