В этой статье мы покажем, как создать красивые календари на HTML и CSS. Это простой, но интересный проект, который поможет улучшить дизайн вашего веб-приложения или сайта. Мы рассмотрим несколько способов создания календаря и предоставим примеры.

C помощью таблицы

Для начала давайте создадим простой календарь с помощью таблицы. Этот способ очень простой, и вам не потребуется особых знаний программирования.

«`html

<!DOCTYPE html>

<html>

<head>

<title>Пример 1: Календарь на HTML и CSS</title>

<style>

/* Стилизация таблицы */

table {

width: 100%;

border-collapse: collapse;

}

th, td {

border: 1px solid #ddd;

text-align: center;

padding: 8px;

}

th {

background-color: #f2f2f2;

}

/* Выделение текущей даты */

td.today {

background-color: #4CAF50;

color: white;

}

</style>

</head>

<body>

<h2>Календарь на HTML и CSS</h2>

<table>

<tr>

<th>Пн</th>

<th>Вт</th>

<th>Ср</th>

<th>Чт</th>

<th>Пт</th>

<th>Сб</th>

<th>Вс</th>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<!— Здесь продолжается для остальных дней —>

</table>

</body>

</html>

«`

Вы можете использовать этот пример в вашем проекте, заменив `<!— Здесь продолжается для остальных дней —>` на соответствующие ячейки для каждого дня месяца.

C использованием списков

Другой подход – списки. Это может показаться немного сложнее, но такой способ более гибкий и удобный для стилизации.

«`html

<!DOCTYPE html>

<html>

<head>

<title>Пример 2: через списки</title>

<style>

/* Общие стили для списков */

ul {

list-style: none;

padding: 0;

margin: 0;

display: flex;

flex-wrap: wrap;

}

li {

width: calc(100% / 7);

text-align: center;

padding: 8px;

border: 1px solid #ddd;

}

/* Выделение текущей даты */

li.today {

background-color: #4CAF50;

color: white;

}

</style>

</head>

<body>

<h2>С использованием списков</h2>

<ul>

<li>Пн</li>

<li>Вт</li>

<li>Ср</li>

<li>Чт</li>

<li>Пт</li>

<li>Сб</li>

<li>Вс</li>

<li></li>

<li></li>

<li></li>

<li></li>

<li>1</li>

<li>2</li>

<li>3</li>

<!— Здесь продолжается для остальных дней —>

</ul>

</body>

</html>

«`

Аналогично первому примеру, вы можете добавить соответствующие дни месяца вместо `<!— Здесь продолжается для остальных дней —>`.

Кастомизированный

Возможно, вы хотите создать календарь под дизайн вашего приложения или сайта. В этом случае вы можете использовать макеты и фоновые изображения, чтобы создать кастомизированный вариант.

«`html

<!DOCTYPE html>

<html>

<head>

<title>Пример 3</title>

<style>

/* Общие стили для кастомизации*/

.custom-calendar {

display: grid;

grid-template-columns: repeat(7, 1fr);

gap: 4px;

}

.custom-day {

text-align: center;

padding: 16px;

font-size: 18px;

border: 1px solid #ddd;

background-color: #f2f2f2;

color: #333;

}

/* Кастомные стили для текущей даты */

.custom-today {

background-color: #4CAF50;

color: white;

}

/* Здесь вы можете добавить кастомные стили, фоновые изображения и т. д. */

</style>

</head>

<body>

<h2>Кастомизируем</h2>

<div class=»custom-calendar»>

<div class=»custom-day»>Пн</div>

<div class=»custom-day»>Вт</div>

<div class=»custom-day»>Ср</div

>

<div class=»custom-day»>Чт</div>

<div class=»custom-day»>Пт</div>

<div class=»custom-day»>Сб</div>

<div class=»custom-day»>Вс</div>

<div class=»custom-day»></div>

<div class=»custom-day»></div>

<div class=»custom-day»></div>

<div class=»custom-day»></div>

<div class=»custom-day»>1</div>

<div class=»custom-day»>2</div>

<div class=»custom-day»>3</div>

<!— Здесь продолжается календарь для остальных дней —>

</div>

</body>

</html>

«`

Вы можете добавить кастомные стили, фоновые изображения и прочие элементы для придания вашего уникального вида.

Заключение

Теперь у вас есть три примера того, как можно создать простые календари на HTML и CSS. Вы можете выбрать подход, который подходит вам.