Java项目首页布局小实例
1、创建web项目
2、添加jar包
3、首页布局
//top.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<img alt="" src="images/pic2.png" style="width:60px;height:70px;">
</body>
</html>
//footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
Project1314高科技有限公司©2017
</body>
</html>
//index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
margin:0 auto;
}
div
{
border:1px solid red;
width:1000px;
height:785px;
}
#divTop{
height:100px;
background:#ddd;
}
#divContent{
height:600px;
background:blue;
}
#divFooter{
height:80px;
background:green;
}
#divLeft{
width:200px;
height:600px;
background:red;
float:left;
}
#divRight{
width:795px;
height:600px;
background:gray;
float:left;
}
</style>
</head>
<body>
<div>
<div id="divTop">
<%@ include file="top.jsp" %>
</div>
<div id="divContent">
<div id="divLeft">left
</div>
<div id="divRight">Right
</div>
</div>
<div id="divFooter">
<%@ include file="footer.jsp" %>
</div>
</div>
</body>
</html>
