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

—— 使用frameset和frame搭建上中下左右管理布局
标签: jsp frameset
2017-11-29 阅读(286)

几年前的后台管理系统中使用还是比较流行的。如今步入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>


已下载:23 次     

原创文章,转载请注明出处:https://www.weizhixi.com/user/index/article/id/9.html

分类:
点击(361) 阅读(286) 举报