div制作button-前端--易笔记

主页面代码

<%@ 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;
}

时间：2017/1/16 9:59:57