Введение
В этом проекте вы научитесь создавать визитку пользователя с использованием HTML и CSS. Цель - создать визуально привлекательную и хорошо структурированную визитку, которую можно использовать для представления информации о пользователе.
👀 Превью
🎯 Задачи
В этом проекте вы научитесь:
- настраивать проект и открывать необходимые файлы;
- центрировать элементы визитки и аватар пользователя с использованием CSS;
- горизонтально центрировать левые текстовые элементы (уровень и очки).
🏆 Достижения
После завершения этого проекта вы сможете:
- структурировать HTML-страницу для визитки;
- использовать CSS для стилизации и позиционирования элементов на странице;
- применять методы центрирования элементов как по горизонтали, так и по вертикали.
Настройка проекта
В этом шаге вы настроите проект и откроете файлы в редакторе.
Откройте папку проекта, которая содержит следующие файлы и директории:
├── avatar.png
├── style.css
└── index.html
Здесь:
index.html- главная страница.style.css- файл, в котором нужно добавить необходимые стили.
Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.
Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.
Центрировать визитку и аватар
В этом шаге вы завершите раздел TODO в style.css, чтобы центрировать элементы визитки и аватара пользователя.
- Найдите раздел TODO в файле
style.css. - Добавьте необходимые правила CSS для горизонтального и вертикального центрирования элементов визитки (
class = card) и аватара пользователя (class = avatar).
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- Сохраните изменения в файле
style.css. - Обновите браузер, чтобы увидеть итоговый результат, итоговый результат выглядит так:
Поздравляем! Вы успешно завершили проект "Визитки пользователя".
Резюме
Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.
