一、前言
Web端的后台管理员页面，基本都是页头、页尾，中间左侧菜单，右侧为主要页面。实现的方法有多种，iframe是最常见的一种。
二、页面文件及界面
文件目录：
界面详情：
界面有点丑，别介意，接下看看如何实现。
三、各页面代码
index.html
<html> <head> <title>index</title> <style> div { float: left; background-color: green; } </style> </head> <body> <iframe src="head.html" frameborder="0" style=" 100%; height: 10%; overflow:hidden; background-color: blue;"></iframe> <div style=" 100%; height: 80%; overflow:hidden;"> <div><iframe src="side.html" frameborder="0"></iframe></div> <div><iframe name="main" src="page1.html" frameborder="0"></iframe></div> </div> <iframe src="foot.html" frameborder="0" style=" 100%; height: 10%; overflow:hidden; background-color: blue;"></iframe> </body> </html>
head.html
<html> <head> <title>head</title> </head> <body> head </body> </html>
foot.html
<html> <head> <title></title> </head> <body> foot </body> </html>
side.html
<html> <head> <title>side</title> </head> <body> <a href="page1.html" target="main">page1.html</a> <a href="page2.html" target="main">page2.html</a> </body> </html>
page1.html
<html> <head> <title>page1</title> </head> <body> page1 </body> <script> let message = "page1"; console.log(message); </script> </html>
page2.html
<html> <head> <title>page2</title> </head> <body> page2 </body> <script> let message = "page2"; console.log(message); </script> </html>
side.html页面中的<a>标签，通过target指向name为main的<iframe>打开指定页面。
四、总结
上面的页面比较基本，可以在这个基础上，使用流行的前端界面如BootStrap、ElementUI、LayUI，以及前端框架比如JQuery、Vue