话不多说,上代码。
tiles.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
<!-- Base Definition -->
<definition name="base-definition"
template="/WEB-INF/jsp/layouts/layout.jsp">
<put-attribute name="title" value="" />
<put-attribute name="header" value="/WEB-INF/jsp/layouts/header.jsp" />
<put-attribute name="content_left" value="/WEB-INF/jsp/layouts/content_left.jsp" />
<put-attribute name="content_main" value="" />
<put-attribute name="footer" value="/WEB-INF/jsp/layouts/footer.jsp" />
</definition>
<!-- Home Page -->
<definition name="thome" extends="base-definition">
<put-attribute name="title" value="Welcome" />
<put-attribute name="content_main" value="/WEB-INF/jsp/system/main/home.jsp" />
</definition>
<!-- <definition name="*.do" extends="base-definition">
<put-attribute name="title" value="Products" />
<put-attribute name="content_main" value="/WEB-INF/jsp/system/main/products.jsp" />
</definition> -->
<!--
<definition name="contactus" extends="base-definition">
<put-attribute name="title" value="Contact Us" />
<put-attribute name="content_main" value="/WEB-INF/views/pages/contactus.jsp" />
</definition>
-->
</tiles-definitions>
layout.jsp
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><tiles:getAsString name="title" /></title>
<link href="<c:url value='/plug-in/css/layout.css' />" rel="stylesheet"></link>
</head>
<body>
<div id="container">
<div id="header">
<tiles:insertAttribute name="header" />
</div>
<div id="content">
<div id="content_left">
<tiles:insertAttribute name="content_left" />
</div>
<div id="splitter" class="close">
</div>
<div id="content_main" class="close">
<tiles:insertAttribute name="content_main" />
</div>
</div>
<div class="clear">
</div>
<div id="footer">
<tiles:insertAttribute name="footer" />
</div>
</div>
</body>
</html>
layout.css
html {
background-color: rgb(245, 245, 245);
}
body {
height: 100%;
background-color: rgb(245, 245, 245);
}
.logo {
float: left;
margin-top: 2px;
margin-left: 2px;
width: 50px;
height: 50px;
}
.copyright {
float: left;
margin-top: 2px;
margin-left: 2px;
width: 600px;
height: 30px;
}
.clear {
clear: both;
}
#container {
width: 100%;
margin: 0 auto; /*设置整个容器在浏览器中水平居中*/
background: #fffCF3;
}
#splitter{
width: 6px;
height: 652px;
margin: 3px 1px 0px 1px;
padding: 3px 0 0 0;
cursor: pointer;
float: left;
/* background: #efefef url(../images/openclose.png) no-repeat 0px center; */
}
#splitter.close {
background-position:1px center;
opacity:0.5;filter:alpha(opacity=50);
background:#efefef url("../images/openclose.png") no-repeat 0px center;
}
#splitter.open {
background-position:1px center;
opacity:0.5;filter:alpha(opacity=50);
background:#efefef url("../images/openclose.png") no-repeat -29px center;
}
#header {
margin-left: 0;
top: 0px;
width: 100%;
height: 80px;
color: #fff;
background-color: #002700;
padding-top: 2px;
text-align: center;
border-bottom: 1px solid hsl(180, 70%, 55%);
}
#content {
width: 100%;
height: 620px;
overflow: auto;
margin-left:1px;
margin-right:1px;
overflow: hidden;
}
#content_main {
height: 100%;
overflow: auto;
float: left;
z-index: 20;
position: fixed;
/* top:0px;
left:0px; */
min-height: 600px;
margin-right: 0px;
/* border-radius:3px 3px 0 0;
margin-top: 10%;
margin-bottom: 10%;
padding-left: 10px; */
}
#content_main.close {
width: 83%;
margin-left: 16%;
}
#content_main.open {
width: 98%;
margin-left: 10px;
}
#content_left {
margin: 8px 0 0 0;
padding: 3px 0 0 0;
width: 15%;
background-color: #fffCF3;
height: 100%;
overflow: auto;
float: left;
min-height: 600px;
}
/*
#content_left #menu {
color: #fff;
text-align: right;
list-style-type: none;
margin-right: 10px;
float: right;
}
#content_left #menu li {
width: 150px;
height: 35px;
font-size: 1.2em;
padding-right: 5px;
}
#content_left #menu li a {
text-decoration: none;
text-transform: uppercase;
color: #fff;
}
#content_left #menu li:active {
border-left: 5px solid hsl(180, 70%, 55%);
}
#content_left #menu li:hover {
background-color: #635555;
border-left: 5px solid hsl(180, 70%, 55%);
} */
#footer {
margin: 8px 0 0 0;
padding: 3px 0 0 0;
font-size: 12px;
text-align: center;
border-top: 1px solid #ff63A2;
width: 100%;
height: 30px;
font-family: 'bgMed', arial, helvetica, sans-serif;
color: #999;
text-align: center;
}