核心提示：主页面代码%@ page language=java contentType=text/html; charset=utf-8pageEncoding=utf-8%%@ taglib prefix=s...
主页面代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="spring" uri="https://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="https://java.sun.com/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>代理店システム</title>
<!-- Bootstrap Core CSS -->
<link
href="../resources/bower_components/bootstrap/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- MetisMenu CSS -->
<link
href="../resources/bower_components/metisMenu/dist/metisMenu.min.css"
rel="stylesheet">
<!-- Custom CSS -->
<link href="../resources/dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link
href="../resources/bower_components/font-awesome/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
<link href="../resources/Themes/Styles/style.css" rel="stylesheet" />
</head>
<body class="bodycolor">
<p class="container">
<p class="row">
<p class="col-md-4 col-md-offset-4" style="margin-top:10.33%">
<p id="puserid" style="display: none"><%= session.getAttribute("userId").toString()%></p>
<table class="menuTable">
<tr>
<td class="menuTd">
<p class="menup" id="commission">
<p class="menuButton"><p class="circle"></p><p class="menup2">AAAAA</p></p>
</p>
</td>
</tr>
<tr>
<td class="menuTd">
<p class="menup" onmousedown="this.className='contentdown'" onmouseup="this.className='menup'">
<p class="menuButton"><p class="circle"></p><p class="menup2">BBBBB</p></p>
</p>
</td>
</tr>
<tr>
<td class="menuTd">
<p class="menup">
<p class="menuButton"><p class="circle"></p><p class="menup2">CCCCC</p></p>
</p>
</td>
</tr>
<tr>
<td class="menuTd">
<p class="menup">
<p class="menuButton"><p class="circle"></p><p class="menup2">DDDDD</p></p>
</p>
</td>
</tr>
<tr>
<td class="menuTd">
<p class="menup">
<p class="menuButton"><p class="circle"></p><p class="menup2">EEEEE</p></p>
</p>
</td>
</tr>
</table>
</p>
</p>
</p>
<!-- jQuery -->
<script src="../resources/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script
src="../resources/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin javascript -->
<script
src="../resources/bower_components/metisMenu/dist/metisMenu.min.js"></script>
<script type="text/javascript"
src="../resources/Themes/Scripts/FunctionJS.js"></script>
<!-- Custom Theme javascript -->
<script src="../resources/dist/js/sb-admin-2.js"></script>
<script src="../resources/Themes/Scripts/PageScripts/loginScripts.js"></script>
</body>
<script>
// 画面初期化
$(document).ready(function() {
initMenu("<%=basePath%>");
});
</script>
</html>
body {
min-width: 1280px;
}
.menuButton {
width: 250px;
height: 45px;
/* background-color: rgb(172,234,223); */
color: #FFFFFF;
/* border-radius: 5px; */
border: 3px solid rgb(210,236,229);
font-family: Verdana, Arial, Sans-Serif;
font-size: 25px;
font-weight: lighter;
/* box-shadow: 3px 3px 3px #888888; */
display: inline-block;
padding: 3px;
text-shadow: 3px 2px 2px #888888;
letter-spacing: 3px
}
.menup {
background-color: rgb(172,234,223);
color: #FFFFFF;
height: 52px;
border-radius: 5px;
border: 2px solid rgb(172,234,223);
box-shadow: 4px 4px 3px #888888;
display: inline-block;
padding: 2px;
text-decoration: none;
cursor: pointer;
//指针形式：手型
}
.menup:hover {
background-color: #73c2c0;
border: 2px solid #73c2c0;
}
.menuButton:hover {
/* background-color: #73c2c0; */
}
/* .menup:active { //当只有一个p时，可以直接使用
background-color: rgb(172,234,223);
border: 2px solid rgb(172,234,223);
box-shadow: 2px 2px 0px #888888;
} */
/**
* 多个p嵌套时，无法通过子p获取父节点，通过鼠标事件进行获取
*
*/
.contentdown {
background-color: rgb(172,234,223);
color: #FFFFFF;
height: 52px;
border-radius: 5px;
border: 2px solid rgb(172,234,223);
box-shadow: 2px 2px 0px #888888;
display: inline-block;
padding: 2px;
text-decoration: none;
cursor: pointer;
//指针形式：手型
}
.menuTable {
border-collapse: separate;
border-spacing: 20px;
cellspacing: 0;
border: 0;
}
.menuTd {
padding: 5px;
}
.circle {
width: 30px;
height: 30px;
background-color: white;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
display: inline-block;
box-shadow: 2px 2px 2px #888888;
float: left;
}
.menup2 {
color: #FFFFFF;
display: inline-block;
text-align: center;
height: 45px;
float: left;
margin-left: 20px;
}
