frameset搭建上中下、中又分左右布局后台管理页面结构

知兮丶青

阅读(691) 2017-11-29

几年前的后台管理系统中使用还是比较流行的。如今步入html5时代，frameset、frame已经双双过期。

虽然过期但也没代表不能用，也没必要纠结一定用最新的东西，该用就用，没需要就不用。只是现在也不流行frameset、frame了，甚至没人再去用了，但是如果你负责旧系统维护话可能还是会接触到。

现在流行的框架有Bootstrap、Amazeui、jqueryui、easyui、extjs等等，这里展开说了，言归正传，下面来看看怎么用frameset、frame。

index.jsp

主页：上、中、左、右、下布局

<%@ page cOntentType="text/html;charset=UTF-8" language="java" %>
<html>

<frameset rows="40,*,20" bordercolor="#ccc" frameborder="0" border="0" framespacing="0">
    <frame src="header.jsp" scrolling="no"/>
    <frameset cols="200,75%" bordercolor="#ccc" frameborder="0" border="0" framespacing="0">
        <frame src="menu.jsp"  />
        <frame src="welcome.jsp" name="mainFrame" />
    </frameset>
    <frame src="footer.jsp" scrolling="no"/>
</frameset>

</html>

header.jsp

头部：用户公司名、logo、注销、退出等

<%@ page cOntentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>header</title>
</head>
<body style="background:#ccccff">
    后台管理
</body>
</html>

menu.jsp

菜单：菜单栏、导航

<%@ page cOntentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>menu</title>
</head>
<body style="background:#ffcccc">

    <ul>
        <li><a href="http://www.weizhixi.com" target="mainFrame">微知兮</a></li>
        <li><a href="http://www.baidu.com" target="mainFrame">百度</a></li>
    </ul>

</body>
</html>

welcome.jsp

默认欢迎页

<%@ page cOntentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页</title>
</head>
<body>
    欢迎使用后台管理
</body>
</html>

footer.jsp

底部：copyright、说明、可无。

<%@ page cOntentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>footer</title>
    <style type="text/css">
        *{padding:0;margin:0;}
    </style>
</head>
<body style="background:#ccffff;text-align:center;">
    Copyright &copy; by 微知兮
</body>
</html>

frameset搭建上中下左右后台布局例子.zip 90b34b6f353b151d5ee575129c6eb119

2.85K

已下载：267 次

原创文章，转载请注明出处：https://www.weizhixi.com/article/9.html