LabEx
ВходРегистрация

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

Beginner

This tutorial is from open-source community. Access the source code

Введение

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

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 95%. Он получил 100% положительных отзывов от учащихся.

Треугольник

В ВМ уже предоставлены 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, чтобы улучшить свои навыки.