简易iframe-前端web网页设计(iframe标签运用)

uyi31

已于 2022-09-22 18:13:41 修改

阅读量934

点赞数 1

分类专栏： iframe 文章标签：前端 html css

于 2022-09-18 18:30:55 首次发布

本文链接：https://blog.csdn.net/LawrenceUyi31/article/details/126920923

版权

iframe 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

iframe-标签的运用，简易前端web网页设计

1.iframe简介
2.图片展示
3.代码展示
4.资源下载

1.iframe简介

1.iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容，为了更好的效果，可能需要使iframe透明效果，那么就需要了解更多的iframe属性
2.iframe元素会创建包含另外一个文档的内联框架（即行内框架）
3.iframe标签成对使用，大多用来web页面的设计

2.图片展示

点击左边x#html，右边边框显示相应的*.html页面，只刷新页面，但网址<不>发生改变

ifr1
ifr2

3.代码展示

1.index-iframe.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index-iframe</title>

    <style>
        * {
            margin: 0;
            padding: 0%;
        }
        
        a {
            text-decoration: none;
        }
        /* logo */
        
        .toplogo {
            text-align: center;
            float: left;
            width: 13%;
            height: 60px;
            background-color: #090e0d;
        }
        /* 头部 */
        
        .head {
            float: right;
            width: 87%;
            height: 60px;
            background-color: #090e0d;
        }
        
        .main {
            width: 100%;
            height: 500px;
            background-color: #f7fdfd;
        }
        /* 左边 */
        
        .main-left {
            float: left;
            width: 13%;
            height: 138%;
            background-color: #090e0d
        }
        
        .main-left-ul>li {
            width: 100%;
            height: 50px;
            list-style: none;
            line-height: 50px;
            font-size: 20px;
            /* 分界线 */
            border-bottom: 1px solid #090e0d;
        }
        
        .main-left-ul>li:hover {
            background-color: #dddddd8e;
        }
        
        .main-left span {
            color: #f5fafad0;
            height: 100px;
            line-height: 40px;
            font-size: 20px;
            margin-left: 25%;
        }
        /* 右边 */
        
        .main-right {
            float: right;
            width: 87%;
            height: 128%;
        }
        /* 尾部 */
        
        .footer {
            float: right;
            width: 87%;
            height: 50px;
            background-color: #e4e4e42f;
        }
    </style>
</head>

<body>
    <div class="toplogo"><img src="../excute/image/ym1.ico" alt="error" style="margin-top: 8%;"></div>
    <div class="head"></div>
    <div class="main">
        <div class="main-left">
            <ul class="main-left-ul">
                <li>
                    <a href="html2.html" target="iframe0"><span>1#html</span></a>
                </li>
                <li>
                    <a href="html1.html" target="iframe0"><span>2#html</span></a>
                </li>
                <li>
                    <a href="html2.html" target="iframe0"><span>3#html</span></a>
                </li>
                <li>
                    <a href="html1.html" target="iframe0"><span>3#html</span></a>
                </li>
                <li>
                    <a href="html1.html" target="iframe0"><span>4#html</span></a>
                </li>
                <li>
                    <!-- <a href="html1.html" target="iframe1"><span>5#html</span></a> -->
                </li>
                <!-- <a href="html1.html" target="iframe0"><span>6#html</span></a> -->
            </ul>
            <!-- <a href="html1.html" target="iframe0"><span>7#html</span></a> -->
        </div>

        <div class="main-right">
            <iframe src="html1.html" frameborder="0" name="iframe0" width="100%" height="100%"></iframe>
            <!-- <iframe src="javascript:;" frameborder="0" name="iframe1" width="100%" height="100%"></iframe> -->
        </div>
    </div>
    <div class="footer"></div>
</body>

</html>

2.html1-iframe.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe-index1</title>
</head>

<body>
    <h1>msg{iframe-index1}</h1>
</body>

</html>