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>