Руководство для начинающих по основам CSS

Введение

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

Skills Graph

Треугольник

В ВМ уже предоставлены index.html и style.css.

Для создания треугольной формы с использованием чистого CSS выполните следующие шаги:

1. Используйте три границы с одинаковой шириной (20px), чтобы создать треугольную форму.
2. Задайте цвет границы (border-color) для противоположной стороны, куда указывает треугольник, на желаемый цвет. Прилегающие границы должны иметь цвет границы transparent.
3. Чтобы изменить размер треугольника, измените значения ширины границы (border-width).

Вот пример фрагмента кода:

<div class="triangle"></div>

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #9c27b0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

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