一、前言
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="width: 100%; height: 10%; overflow:hidden; background-color: blue;"></iframe> <div style="width: 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="width: 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