Так будет выглядеть наш календарь на год, с адаптивным дизайном:
Код index.html:
Код:
<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<style>
.calendar { border:1px solid #aaa; box-shadow:0px 0px 12px 5px #ddd; width:255px; height:210px; border-radius:5px; padding:5px 5px; margin:5px 5px;}
.calendar .month { font-weight:bold; font-size:14pt; color:#333; width:100%; height:40px; text-align:center; }
.calendar hr { border:1px solid #eee; width:90% }
.calendar .weekname { width:35px; height:20px; color:#333; float:left; font-size:14pt; text-align:center; font-weight:bold;}
.calendar .day { width:35px; height:20px; color:#333; float:left; font-size:14pt; font-weight:normal; text-align:center; }
.calendar .sel { width:35px; height:20px; color:#f00; float:left; font-size:14pt; font-weight:bold; text-decoration:underline; text-shadow:0px 0px 5px #f00; text-align:center; }
.calendar .weekend { width:35px; height:20px; color:#888; float:left; font-size:14pt; font-weight:normal; text-align:center; }
.calendar .clearfix::after { content:""; clear:both; display:table; }
.clearfix::after { content:""; clear:both; display:table; }
</style>
</head>
<body>
<h1><center>2022</center></h1>
<div class="clearfix">
<div style="float:left;">
<div class="calendar">
<div class="month">
Январь<br>
<hr>
</div>
<div class="clearfix">
<div class="weekname">
Пн
</div>
<div class="weekname">
Вт
</div>
<div class="weekname">
Ср
</div>
<div class="weekname">
Чт
</div>
<div class="weekname">
Пт
</div>
<div class="weekend">
Су
</div>
<div class="weekend">
Вс
</div>
</div>
<div class="clearfix">
<div class="day">27</div>
<div class="day">28</div>
<div class="day">29</div>
<div class="day">30</div>
<div class="day">31</div>
<div class="weekend">1</div>
<div class="weekend">2</div>
</div>
<div class="clearfix">
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="weekend">8</div>
<div class="weekend">9</div>
</div>
<div class="clearfix">
<div class="day">10</div>
<div class="day">11</div>
<div class="day">12</div>
<div class="day">13</div>
<div class="day">14</div>
<div class="weekend">15</div>
<div class="weekend">16</div>
</div>
<div class="clearfix">
<div class="day">17</div>
<div class="day">18</div>
<div class="day">19</div>
<div class="day">20</div>
<div class="day">21</div>
<div class="weekend">22</div>
<div class="weekend">23</div>
</div>
<div class="clearfix">
<div class="day">24</div>
<div class="day">25</div>
<div class="day">26</div>
<div class="day">27</div>
<div class="day">28</div>
<div class="weekend">29</div>
<div class="weekend">30</div>
</div>
<div class="clearfix">
<div class="sel">31</div>
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="weekend">5</div>
<div class="weekend">6</div>
</div>
</div>
</div>
<div style="float:left;">
<div class="calendar">
<div class="month">
Февраль<br>
<hr>
</div>
<div class="clearfix">
<div class="weekname">
Пн
</div>
<div class="weekname">
Вт
</div>
<div class="weekname">
Ср
</div>
<div class="weekname">
Чт
</div>
<div class="weekname">
Пт
</div>
<div class="weekend">
Сб
</div>
<div class="weekend">
Вс
</div>
</div>
</div>
</div>
<div style="float:left;">
<div class="calendar">
<div class="month">
Март<br>
<hr>
</div>
<div class="clearfix">
<div class="weekname">
Пн
</div>
<div class="weekname">
Вт
</div>
<div class="weekname">
Ср
</div>
<div class="weekname">
Чт
</div>
<div class="weekname">
Пт
</div>
<div class="weekend">
Сб
</div>
<div class="weekend">
Вс
</div>
</div>
</div>
</div>
<div style="float:left;">
<div class="calendar">
<div class="month">
Апрель<br>
<hr>
</div>
<div class="clearfix">
<div class="weekname">
Пн
</div>
<div class="weekname">
Вт
</div>
<div class="weekname">
Ср
</div>
<div class="weekname">
Чт
</div>
<div class="weekname">
Пт
</div>
<div class="weekend">
Сб
</div>
<div class="weekend">
Вс
</div>
</div>
</div>
</div>
<div style="float:left;">
<div class="calendar">
<div class="month">
Май<br>
<hr>
</div>
<div class="clearfix">
<div class="weekname">
Пн
</div>
<div class="weekname">
Вт
</div>
<div class="weekname">
Ср
</div>
<div class="weekname">
Чт
</div>
<div class="weekname">
Пт
</div>
<div class="weekend">
Сб
</div>
<div class="weekend">
Вс
</div>
</div>
</div>
</div>
<div style="float:left;">
<div class="calendar">
<div class="month">
Июнь<br>
<hr>
</div>
<div class="clearfix">
<div class="weekname">
Пн
</div>
<div class="weekname">
Вт
</div>
<div class="weekname">
Ср
</div>
<div class="weekname">
Чт
</div>
<div class="weekname">
Пт
</div>
<div class="weekend">
Сб
</div>
<div class="weekend">
Вс
</div>
</div>
</div>
</div>
</div>
<div class="clearfix">
<div style="float:left;">
<div class="calendar">
<div class="month">
Июль<br>
<hr>
</div>
<div class="clearfix">
<div class="weekname">
Пн
</div>
<div class="weekname">
Вт
</div>
<div class="weekname">
Ср
</div>
<div class="weekname">
Чт
</div>
<div class="weekname">
Пт
</div>
<div class="weekend">
Сб
</div>
<div class="weekend">
Вс
</div>
</div>
</div>
</div>
<div style="float:left;">
<div class="calendar">
<div class="month">
Август<br>
<hr>
</div>
<div class="clearfix">
<div class="weekname">
Пн
</div>
<div class="weekname">
Вт
</div>
<div class="weekname">
Ср
</div>
<div class="weekname">
Чт
</div>
<div class="weekname">
Пт
</div>
<div class="weekend">
Сб
</div>
<div class="weekend">
Вс
</div>
</div>
</div>
</div>
<div style="float:left;">
<div class="calendar">
<div class="month">
Сентябрь<br>
<hr>
</div>
<div class="clearfix">
<div class="weekname">
Пн
</div>
<div class="weekname">
Вт
</div>
<div class="weekname">
Ср
</div>
<div class="weekname">
Чт
</div>
<div class="weekname">
Пт
</div>
<div class="weekend">
Сб
</div>
<div class="weekend">
Вс
</div>
</div>
</div>
</div>
<div style="float:left;">
<div class="calendar">
<div class="month">
Октябрь<br>
<hr>
</div>
<div class="clearfix">
<div class="weekname">
Пн
</div>
<div class="weekname">
Вт
</div>
<div class="weekname">
Ср
</div>
<div class="weekname">
Чт
</div>
<div class="weekname">
Пт
</div>
<div class="weekend">
Сб
</div>
<div class="weekend">
Вс
</div>
</div>
</div>
</div>
<div style="float:left;">
<div class="calendar">
<div class="month">
Ноябрь<br>
<hr>
</div>
<div class="clearfix">
<div class="weekname">
Пн
</div>
<div class="weekname">
Вт
</div>
<div class="weekname">
Ср
</div>
<div class="weekname">
Чт
</div>
<div class="weekname">
Пт
</div>
<div class="weekend">
Сб
</div>
<div class="weekend">
Вс
</div>
</div>
</div>
</div>
<div style="float:left;">
<div class="calendar">
<div class="month">
Декабрь<br>
<hr>
</div>
<div class="clearfix">
<div class="weekname">
Пн
</div>
<div class="weekname">
Вт
</div>
<div class="weekname">
Ср
</div>
<div class="weekname">
Чт
</div>
<div class="weekname">
Пт
</div>
<div class="weekend">
Сб
</div>
<div class="weekend">
Вс
</div>
</div>
</div>
</div>
</div>
</body>
</html>