div 制作button

jsp主页面

[html] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3. <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>  
  4. <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>  
  5. <%  
  6.     String path = request.getContextPath();  
  7.     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()  
  8.             + path + "/";  
  9. %>  
  10. <!DOCTYPE html>  
  11. <html lang="jp">  
  12. <head>  
  13. <meta charset="utf-8">  
  14. <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  15. <meta name="viewport" content="width=device-width, initial-scale=1">  
  16. <meta name="description" content="">  
  17. <meta name="author" content="">  
  18.   
  19. <title></title>  
  20.   
  21. <!-- Bootstrap Core CSS -->  
  22. <link  
  23.     href="../resources/bower_components/bootstrap/dist/css/bootstrap.min.css"  
  24.     rel="stylesheet">  
  25.   
  26. <!-- MetisMenu CSS -->  
  27. <link  
  28.     href="../resources/bower_components/metisMenu/dist/metisMenu.min.css"  
  29.     rel="stylesheet">  
  30.   
  31. <!-- Custom CSS -->  
  32. <link href="../resources/dist/css/sb-admin-2.css" rel="stylesheet">  
  33.   
  34. <!-- Custom Fonts -->  
  35. <link  
  36.     href="../resources/bower_components/font-awesome/css/font-awesome.min.css"  
  37.     rel="stylesheet" type="text/css">  
  38. <link href="../resources/Themes/Styles/style.css" rel="stylesheet" />  
  39.   
  40. </head>  
  41. <body class="bodycolor">  
  42.     <div class="container">  
  43.         <div class="row">  
  44.             <div class="col-md-4 col-md-offset-4" style="margin-top:10.33%">  
  45.             <p  id="puserid" style="display: none"><%= session.getAttribute("userId").toString()%></p>  
  46.                 <table class="menuTable">  
  47.                     <tr>  
  48.                         <td class="menuTd">  
  49.                         <div class="menudiv" id="commission">  
  50.                             <div class="menuButton"><div class="circle"></div><div class="menudiv2">AAAAA</div></div>  
  51.                             </div>  
  52.                         </td>  
  53.                     </tr>  
  54.                     <tr>  
  55.                         <td class="menuTd">  
  56.                         <div class="menudiv" onmousedown="this.className='contentdown'" onmouseup="this.className='menudiv'">  
  57.                             <div class="menuButton"><div class="circle"></div><div class="menudiv2">BBBBB</div></div>  
  58.                             </div>  
  59.                         </td>  
  60.                     </tr>  
  61.                     <tr>  
  62.                         <td class="menuTd">  
  63.                         <div class="menudiv">  
  64.                             <div class="menuButton"><div class="circle"></div><div class="menudiv2">CCCCC</div></div>  
  65.                             </div>  
  66.                         </td>  
  67.                     </tr>  
  68.                     <tr>  
  69.                         <td class="menuTd">  
  70.                         <div class="menudiv">  
  71.                             <div class="menuButton"><div class="circle"></div><div class="menudiv2">DDDDD</div></div>  
  72.                             </div>  
  73.                         </td>  
  74.                     </tr>  
  75.                     <tr>  
  76.                         <td class="menuTd">  
  77.                         <div class="menudiv">  
  78.                             <div class="menuButton"><div class="circle"></div><div class="menudiv2">EEEEE</div></div>  
  79.                             </div>  
  80.                         </td>  
  81.                     </tr>  
  82.                 </table>  
  83.             </div>  
  84.         </div>  
  85.     </div>  
  86.     <!-- jQuery -->  
  87.     <script src="../resources/bower_components/jquery/dist/jquery.min.js"></script>  
  88.   
  89.     <!-- Bootstrap Core JavaScript -->  
  90.     <script  
  91.         src="../resources/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>  
  92.   
  93.     <!-- Metis Menu Plugin JavaScript -->  
  94.     <script  
  95.         src="../resources/bower_components/metisMenu/dist/metisMenu.min.js"></script>  
  96.     <script type="text/javascript"  
  97.         src="../resources/Themes/Scripts/FunctionJS.js"></script>  
  98.   
  99.     <!-- Custom Theme JavaScript -->  
  100.     <script src="../resources/dist/js/sb-admin-2.js"></script>  
  101.     <script src="../resources/Themes/Scripts/PageScripts/loginScripts.js"></script>  
  102. </body>  
  103. <script>  
  104.     // 画面初期化  
  105.     $(document).ready(function() {  
  106.         initMenu("<%=basePath%>");  
  107.         });  
  108.     </script>  
  109. </html>  
CSS样式
[css] view plain copy
  1. body{  
  2.     min-width: 1280px;  
  3. }  
  4.   
  5.   
  6.   
  7. .menuButton {    
  8.     width: 250px;    
  9.     height: 45px;    
  10.     /* background-color: rgb(172,234,223);   */  
  11.     color: #FFFFFF;    
  12.     /* border-radius: 5px;   */  
  13.     border: 3px solid rgb(210,236,229);  
  14.     font-family: Verdana, Arial, Sans-Serif;    
  15.     font-size: 25px;    
  16.     font-weight: lighter;    
  17.     /* box-shadow: 3px 3px 3px #888888; */  
  18.     display: inline-block;  
  19.     padding:3px;  
  20.     text-shadow: 3px 2px 2px #888888;  
  21.     letter-spacing:3px  
  22. }   
  23.   
  24. .menudiv {   
  25.     background-color: rgb(172,234,223);    
  26.     color: #FFFFFF;   
  27.     height: 52px;   
  28.     border-radius: 5px;  
  29.     border: 2px solid rgb(172,234,223);  
  30.     box-shadow: 4px 4px 3px #888888;  
  31.     display: inline-block;  
  32.     padding:2px;  
  33.     text-decoration: none;  
  34.     cursor:pointer; //指针形式：手型     
  35. }  
  36.   
  37. .menudiv:hover{  
  38.     background-color: #73c2c0;  
  39.     border: 2px solid #73c2c0;  
  40. }  
  41.   
  42. .menuButton:hover{  
  43.     /* background-color: #73c2c0; */  
  44. }  
  45.   
  46. /* .menudiv:active { //当只有一个div时，可以直接使用 
  47.     background-color: rgb(172,234,223); 
  48.     border: 2px solid rgb(172,234,223); 
  49.     box-shadow: 2px 2px 0px #888888;  
  50. } */  
  51.   
  52. /** 
  53. * 多个div嵌套时，无法通过子div获取父节点，通过鼠标事件进行获取 
  54. * 
  55. */  
  56. .contentdown  
  57. {  
  58.     background-color: rgb(172,234,223);  
  59.     color: #FFFFFF;   
  60.     height: 52px;   
  61.     border-radius: 5px;  
  62.     border: 2px solid rgb(172,234,223);  
  63.     box-shadow: 2px 2px 0px #888888;   
  64.     display: inline-block;  
  65.     padding:2px;  
  66.     text-decoration: none;  
  67.     cursor:pointer; //指针形式：手型     
  68. }  
  69.   
  70. .menuTable  
  71. {  
  72.     border-collapse:separate;  
  73.     border-spacing:20px;  
  74.     cellspacing:0;  
  75.     border:0;  
  76. }  
  77.   
  78. .menuTd  
  79. {  
  80.   padding:5px;  
  81. }  
  82.   
  83. .circle {  
  84. width: 30px;   
  85. height: 30px;  
  86. background-color: white;   
  87. -webkit-border-radius: 100px;   
  88. -moz-border-radius:100px;  
  89. border-radius:100px;  
  90. display: inline-block;  
  91. box-shadow: 2px 2px 2px #888888;  
  92. float:left;  
  93. }  
  94.   
  95. .menudiv2 {    
  96.     color: #FFFFFF;   
  97.     display: inline-block;  
  98.     text-align:center;  
  99.     height:45px;  
  100.     float:left;  
  101.     margin-left:20px;  
  102. }  
效果
div 制作buttondiv 制作button

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode