html5 css3制作日历,CSS3制作精美日历

HTML5 和 CSS3 可以用来制作非常漂亮的日历。下面是一个简单的例子：

HTML 代码：

<div class="calendar">
  <div class="month">
    <ul>
      <li class="prev">&#10094;</li>
      <li class="next">&#10095;</li>
      <li>
        August<br>
        <span style="font-size:18px">2021</span>
      </li>
    </ul>
  </div>

  <ul class="weekdays">
    <li>Sun</li>
    <li>Mon</li>
    <li>Tue</li>
    <li>Wed</li>
    <li>Thu</li>
    <li>Fri</li>
    <li>Sat</li>
  </ul>

  <ul class="days">
    <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><span class="active">10</span></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>
</div>

CSS 代码：

.calendar {
  font-family: Arial;
  margin: auto;
  padding: 20px;
  border: 1px solid #CCC;
  box-shadow: 0 0 10px #CCC;
}

.month {
  padding: 10px 25px;
  background: #1abc9c;
  color: #FFF;
  text-align: center;
}

.month ul {
  margin: 0;
  padding: 0;
}

.month ul li {
  display: inline-block;
  margin: 0 5px;
  color: #FFF;
  font-size: 20px;
}

.month .prev,
.month .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  padding: 10px 15px;
  background-color: #1abc9c;
  color: #FFF;
  border-radius: 0 3px 3px 0;
}

.month .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.weekdays {
  margin: 0;
  padding: 10px 0;
  background-color: #ddd;
}

.weekdays li {
  display: inline-block;
  width: 13.6%;
  color: #666;
  text-align: center;
}

.days {
  padding: 10px 0;
  background: #EEE;
  margin: 0;
}

.days li {
  list-style-type: none;
  display: inline-block;
  width: 13.6%;
  text-align: center;
  margin-bottom: 5px;
  font-size:12px;
  color: #777;
}

.days li .active {
  padding: 5px;
  background: #1abc9c;
  color: #FFF !important;
  border-radius: 50%;
}

这个例子中的日历只显示了一个月的日期，但你可以根据需要修改代码，增加更多的月份和日期。