В этой статье мы покажем, как создать красивые календари на 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> «` |

- Прямо в эфире решим типичные задачи программиста только с помощью ChatGPT
- Возможности Python — расскажем что можно делать и сколько на этом зарабатывать?
- Что ждет рынок программирования и почему мы решили сюда пойти
Аналогично первому примеру, вы можете добавить соответствующие дни месяца вместо `<!— Здесь продолжается для остальных дней —>`.
Кастомизированный
Возможно, вы хотите создать календарь под дизайн вашего приложения или сайта. В этом случае вы можете использовать макеты и фоновые изображения, чтобы создать кастомизированный вариант.
«`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. Вы можете выбрать подход, который подходит вам.
- Создай и прокачай собственного чат-бота
- Подарим подборку бесплатных инструментов для написания кода