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

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 ,在把打开的文件替换为网址。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一,HTML语言的一般语法: 1,围堵标记:<>… 1)带属性的标记: … 2)无属性的标记:加粗 居中 标题 2...
    清水易蓝阅读 1,290评论 0 2
  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,158评论 0 0
  • 第一章 1、使用浏览器去访问的程序,叫网页 2、web代码存放在服务器 代码分为两种:① 运行在浏览器端:前端代...
    fastwe阅读 3,442评论 0 2
  • 0.B/S结构 浏览器服务器模式,web浏览器是客户端最主要的应用软件.将客户端使用web进行统一,系统功能实现集...
    liusong007阅读 1,089评论 0 1
  • 1、HTML剩下2、CSS框模型 定位 HTML剩下 HTML链接 HTML 使用超级链接与网络上的另一个文档相连...
    想和于谦共枕眠阅读 613评论 0 0