美文网首页基础前端
iframe 后台管理系统 | 很火的搜索导航

iframe 后台管理系统 | 很火的搜索导航

作者: CondorHero | 来源:发表于2019-04-24 22:44 被阅读93次

    1.后台管理系统

    后台管理系统.gif
    实现思路: 利用 iframe 和 a 标签进行关联
    • name 属性规定 <iframe> 的名称。

    name 元素的 name 属性用于在 JavaScript 中引用元素,或者作为 <a> 或 <form> 元素的 target 属性的值,或者作为 <input> 或 <button> 的 form 的 target 属性的值。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>后台管理系统</title>
        <style>
            p {
                float: left;
            }
            a {
                display: block;
                height: 20px;
                width: 80px;
                border: 1px solid #ccc;
                text-decoration: none;
                background: lightblue;
            }
            iframe {
                float: left;
            }
        </style>
    </head>
    <body> 
        <p>
            <a href="a.html" target= "main">首页</a><br>
            <a href="b.html" target= "main">紧急通知</a><br>
            <a href="c.html" target= "main">用户分类</a><br>
            <a href="d.html" target= "main">黑名单</a><br>
            <a href="e.html" target= "main">基本资料</a><br>
        </p>
        <iframe name= "main" srcdoc= "<p>我是类似innerHTML</p>" src="" frameborder= "1"></iframe>
    </html>
    
    • frameborder

    1 默认。开启边框。
    0 关闭边框。

    • srcdoc 属性规定要显示在内联框架中的页面的 HTML 内容。

    如果浏览器支持 srcdoc 属性,且指定了 srcdoc 属性,它将覆盖在 src 属性中规定的内容。
    如果浏览器不支持 srcdoc 属性,且指定了 srcdoc 属性,它将显示在 src 属性中规定的文件。

    2.很火的搜索导航

    很火的搜索导航

    左边是 li ,在把打开的文件替换为网址。

    相关文章

      网友评论

        本文标题:iframe 后台管理系统 | 很火的搜索导航

        本文链接:https://www.haomeiwen.com/subject/uhqogqtx.html