iframe 后台管理系统 | 很火的搜索导航
2019-04-24 本文已影响93人
CondorHero
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 ，在把打开的文件替换为网址。
