modified version with Jquery CSS 日历样式

​x
 
<head>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#bottom li").click(function(){
      $(this).css({"background-color":"#1abc9c"});
      $("#bottom li").not(this).css({"background-color":"grey"})
    });
  });
  </script>
</head>
<body>
  <div id="up">
    <div id="text">
      August<br>2016</br>
    </div>
  </div>
<ul id="middle">
  <li>Mo</li>
  <li>Tu</li>
  <li>We</li>
  <li>Th</li>
  <li>Fr</li>
  <li>Sa</li>
  <li>Su</li>
</ul>
<ul id="bottom">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
   <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
</ul>
</body>

HTML

xxxxxxxxxx
 
#up{
  background-color:#00ffff;
}
#text{
  font-size:30;
  color:white;
  position:relative;
  left:300px;
}
#text br{
  text-align:center;
}
#middle{
  background-color:grey;
  opacity:0.7;
  margin-top:0%;
  margin-bottom:0%;
  padding-left:0;
  width:100%;
}
#middle li{
  display:inline-block;
  color:white;
   text-align:center;
list-style-type: none;
    display: inline-block;
    width: 13.6%;
    text-align: center;
    margin-bottom: 5px;
    font-size:12px;
    color: white;
}
#bottom{
   padding: 10px 0;
  margin-top:0%;
  margin-bottom:0%;
  background-color:grey;
}
#bottom li{
  cursor:pointer;
  display:inline-block;
  background-color:grey;
   text-align:center;
list-style-type: none;
    display: inline-block;
    width: 13.6%;
    text-align: center;
    margin-bottom: 5px;
    font-size:12px;
color:white;
}

CSS