如何使用CSS创建日历？

Z时代
2024-01-10
分类：综合

要使用CSS创建日历，代码如下-

示例

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   * {
      box-sizing: border-box;
   }
   .calender {
      border: 1px solid darkorchid;
   }
   .month {
      padding: 50px;
      width: 100%;
      background: #874de6;
      text-align: center;
      border: 1px solid rgba(139, 0, 139, 0.671);
   }
   .month ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
   }
   .month ul li {
      font-size: 30px;
      text-transform: uppercase;
      letter-spacing: 6px;
      color: yellow;
   }
   .month .lastMonth {
      float: left;
      padding-top: 10px;
   }
   .month .nextMonth {
      float: right;
      padding-top: 10px;
   }
   .Days {
      margin: 0;
      padding: 10px 0;
      background-color: rgb(169, 210, 248);
      border: 1px solid rgba(0, 0, 139, 0.514);
   }
   .Days li {
      font-weight: bold;
      display: inline-block;
      width: 13.6%;
      color: rgb(0, 0, 0);
      text-align: center;
   }
   .daysNumber {
      padding: 10px 0;
      background: rgb(235, 255, 182);
      margin: 0;
      font-weight: bold;
   }
   .daysNumber li {
      list-style-type: none;
      display: inline-block;
      width: 13.6%;
      text-align: center;
      margin-bottom: 5px;
      font-size: 12px;
      color: rgb(0, 0, 0);
   }
   .daysNumber li .today {
      padding: 5px;
      background: #17003b;
      font-weight: bolder;
      border-radius: 50%;
      color: rgb(229, 255, 0) !important;
   }
</style>
</head>
<body>
<h1 style="text-align: center;">CSS Calendar Example</h1>
<div class="calender">
<div class="month">
<ul>
<li class="lastMonth">❮</li>
<li class="nextMonth">❯</li>
<li>
March<br />
<span>2020</span>
</li>
</ul>
</div>
<ul class="Days">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="daysNumber">
<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><span class="today">22</span></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>
</div>
</body>
</html>