Based on the background of the iframe page

I. Introduction

　　Web page administrator back end, basically header, footer, middle left side menu, right side of the main page. There are many ways to achieve, iframe is the most common one.

Second, the page file and interface

File Directory:

Interface details:

Interface is a bit ugly, never mind, took a look at how to achieve.

3. Each page code

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 page <a> tag name is directed through the main target of <iframe> to open the specified page.

IV Summary

　　The above more basic page, this may be based on the use of such popular front-end interface BootStrap, ElementUI, LayUI, such as front-end frame and JQuery, Vue

Based on the background of the iframe page

Guess you like