Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги: ,

Категории

Рубрики

Написание постов, ведение соц сетей Ваших компаний. Формирование имиджа и контента.

от 22900 

Разработка сайтов под ключ. Работаем с такими системами, как Worpress, 1C-Bitrix, Tilda. Закажите разработку в Lion Digital и получите по настоящему продающий сайт.

от 32900 

Услуги SEO копирайтера под ключ. Пишем качественные тексты.

от 950 

Как создать календарь в html и CSS

Для создания календаря в HTML и CSS можно использовать таблицу и стилизовать ее с помощью CSS. Вот пример кода:

HTML:

<div class="calendar">
  <table>
   thead>
      <tr>
        <th colspan="7">Месяц Год</th>
      </tr>
      <tr>
        <th>Пн</th>
        <th>Вт</th>
       th>Ср</th>
        <th>Чт</th>
        <th>Пт</th>
       th>Сб</th>
        <th>Вс</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
       td></td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
       td>6</td>
        <td>7</td>
       td>8</td>
       td>9</td>
        <td>10</td>
      </tr>
      <tr>
        <td>11</td>
        <td>12</td>
       td>13</td>
        <td>14</td>
       td>15</td>
        <td>16</td>
        <td>17</td>
      </tr>
     tr>
       td>18</td>
       td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
       td>23</td>
        <td>24</td>
      </tr>
     tr>
        <td>25</td>
       td>26</td>
       td>27</td>
       td>28</td>
       td>29</td>
       td>30</td>
        <td>31</td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

.calendar {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: #eee;
  font-weight: bold;
  text-align: center;
  padding: 10px;
}

td {
  border: 1px solid #ccc;
  text-align: center;
  padding: 10px;
}

td:hover {
  background-color: #f5f5f5;
}

thead th:first-child,
tbody td:first-child {
  color: #f00;
}

thead th:last-child,
tbody td:last-child {
  color: #00f;
}

Вы можете изменить стили в соответствии со своими потребностями.

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.