CSS的position设置:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
h1{
/*设置为relative一般是为其他元素作为基础;*/
position:relative;
width:100%;
border-bottom:1px dashed #999999;
}
h1 span.date{
position:absolute;
bottom:0;
right:0;
font-size:.5em;
background-color:#E9E9E9;
color:black;
padding:2px 7px 0 7px;
}
</style>
</head>
<body>
<h1><span class="date">Nov.10,2016</span>CosmoFarmer Bought By Google</h1>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
#contentWrapper{
/*设置为relative一般是为其他元素作为基础;*/
position:relative;
}
#leftSidebar{
/*设置为absolute，其他元素都不知道他的存在;*/
position:absolute;
left:0;
top:0;
width:200px;
}
#rightSidebar{
position:absolute;
right:0;
top:0;
width:200px;
}
#main{
/*设置margin可以空出有效的位置留给其他元素;*/
margin-left:200px;
margin-right:200px;
}
</style>
</head>
<body>
<div id='banner'>banner</div>
<div id='contentWrapper'>
<div id='main'>main</div>
<div id='leftSidebar'>leftSidebar</div>
<div id='rightSidebar'>rightSidebar</div>
<div id='footer'>footer</div>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<style type="text/css">
#banner{
/*设置为fixed位置固定不变*/
position:fixed;
left:0;
top:0;
width:100%;
}
#sidebar{
position:fixed;
left:0;
top:110px;
width:175px;
}
#footer{
position:fixed;
bottom:0;
left:0;
width:100%;
}
#main{
margin-left:190px;
margin-top:110px;
}
</style>
</head>
<body>
<div id='banner'>banner</div>
<div id='main'>main
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id='sidebar'>sidebar</div>
<div id='footer'>footer</div>
</body>
</html>