div 制作button

雨点打透心脏的1/2处 2022-07-11 05:48 160阅读 0赞

jsp主页面

<%@ page language="java" contentType="text/html; charset=utf-8"
    	pageEncoding="utf-8"%>
    <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
    <%@ taglib prefix="c" uri="http://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>
    
    
    <link
    	href="../resources/bower_components/bootstrap/dist/css/bootstrap.min.css"
    	rel="stylesheet">
    
    
    <link
    	href="../resources/bower_components/metisMenu/dist/metisMenu.min.css"
    	rel="stylesheet">
    
    
    <link href="../resources/dist/css/sb-admin-2.css" rel="stylesheet">
    
    
    <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">
    	<div class="container">
    		<div class="row">
    			<div 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">
    						<div class="menudiv" id="commission">
    							<div class="menuButton"><div class="circle"></div><div class="menudiv2">AAAAA</div></div>
    							</div>
    						</td>
    					</tr>
    					<tr>
    						<td class="menuTd">
    						<div class="menudiv" οnmοusedοwn="this.className='contentdown'" οnmοuseup="this.className='menudiv'">
    							<div class="menuButton"><div class="circle"></div><div class="menudiv2">BBBBB</div></div>
    							</div>
    						</td>
    					</tr>
    					<tr>
    						<td class="menuTd">
    						<div class="menudiv">
    							<div class="menuButton"><div class="circle"></div><div class="menudiv2">CCCCC</div></div>
    							</div>
    						</td>
    					</tr>
    					<tr>
    						<td class="menuTd">
    						<div class="menudiv">
    							<div class="menuButton"><div class="circle"></div><div class="menudiv2">DDDDD</div></div>
    							</div>
    						</td>
    					</tr>
    					<tr>
    						<td class="menuTd">
    						<div class="menudiv">
    							<div class="menuButton"><div class="circle"></div><div class="menudiv2">EEEEE</div></div>
    							</div>
    						</td>
    					</tr>
    				</table>
    			</div>
    		</div>
    	</div>
    	
    	<script src="../resources/bower_components/jquery/dist/jquery.min.js"></script>
    
    	
    	<script
    		src="../resources/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    
    	
    	<script
    		src="../resources/bower_components/metisMenu/dist/metisMenu.min.js"></script>
    	<script type="text/javascript"
    		src="../resources/Themes/Scripts/FunctionJS.js"></script>
    
    	
    	<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>

CSS样式

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
    } 
    
    .menudiv { 
        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; //指针形式：手型   
    }
    
    .menudiv:hover{
    	background-color: #73c2c0;
    	border: 2px solid #73c2c0;
    }
    
    .menuButton:hover{
    	/* background-color: #73c2c0; */
    }
    
    /* .menudiv:active { //当只有一个div时，可以直接使用
    	background-color: rgb(172,234,223);
    	border: 2px solid rgb(172,234,223);
    	box-shadow: 2px 2px 0px #888888; 
    } */
    
    /**
    * 多个div嵌套时，无法通过子div获取父节点，通过鼠标事件进行获取
    *
    */
    .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;
    }
    
    .menudiv2 {  
        color: #FFFFFF; 
        display: inline-block;
        text-align:center;
        height:45px;
        float:left;
        margin-left:20px;
    }

效果  
![Center][] ![Center 1][]

[Center]: https://img-blog.csdn.net/20170117204230627?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjYwMTY0Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20220711/00304618bfdb48079d12946f89854297.png