div 制作button

最新推荐文章于 2023-08-07 10:55:15 发布

菜鸟小灰灰

最新推荐文章于 2023-08-07 10:55:15 发布

阅读量6.5k

点赞数

分类专栏： HTML 文章标签： web前端

本文链接：https://blog.csdn.net/u012601647/article/details/54586649

版权

HTML 专栏收录该内容

10 篇文章 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>

<!-- 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">
	<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>
	<!-- 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>

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

效果

菜鸟小灰灰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div 制作button

jsp主页面<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.g
复制链接

扫一扫