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

Техники стилизации CSS для веб-разработки

Beginner

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

Введение

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

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

Круг

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

Для создания круглой формы с использованием чистого CSS используйте свойство border-radius: 50%, чтобы закруглить границы элемента. Убедитесь, что установите оба width и height равными значениям, чтобы обеспечить идеальный круг. Если использовать разные значения, будет создан эллипс. Вот пример кода:

<div class="circle"></div>

.circle {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #9c27b0;
}

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

Резюме

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