Дайте своему сайту новый взгляд

Введение

В этом проекте вы научитесь проектировать и стилизовать страницу входа с красивым интерфейсом. Цель - создать привлекательную страницу входа, которая обеспечит приятный пользовательский опыт.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• настраивать структуру проекта и понимать предоставленные файлы;
• стилизовать тело и панель навигации страницы входа;
• стилизовать форму входа, включая изображение аватара, контейнер формы, элементы формы и текст.

🏆 Достижения

После завершения этого проекта вы сможете:

• создавать привлекательный макет страницы входа с использованием CSS;
• стилизовать различные элементы формы входа, такие как поля ввода, кнопки и текст;
• внедрять изображения и стили фона, чтобы улучшить общий дизайн страницы входа.

Skills Graph

Настройка структуры проекта

В этом шаге вы научитесь настраивать структуру проекта для страницы входа.

1. Откройте лабораторную среду и перейдите в каталог проекта.
2. Внутри каталога проекта вы должны увидеть следующую структуру файлов:

├── css
│   └── style.css
├── images
│   ├── background-pic.jpg
│   ├── cat.png
│   └── icon.png
└── index.html

3. Файл css/style.css - это то место, где вы будете писать свой CSS-код для стилизации страницы входа. В папке images находятся файлы изображений, используемые в проекте.
4. Откройте файл index.html в текстовом редакторе. Это HTML-файл, содержащий структуру страницы входа.
5. Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.
6. Откройте "Web 8080" в верхней части ВМ и обновите его вручную, и вы увидите страницу.

Стилизация тела и панели навигации

В этом шаге вы стилизуете тело и панель навигации страницы входа.

1. Откройте файл css/style.css в текстовом редакторе.
2. Добавьте следующий CSS-код в файл:

/* Добавьте свой CSS-код здесь */
body {
  background-image: url("../images/background-pic.jpg");
  background-size: cover;
  color: #fff;
  height: 945;
  width: 1920;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-bar img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: 15px;
}

Этот код задает фон для тела, стиль панели навигации и добавляет изображение в верхний правый угол страницы для доступа к профилю.

Стилизация формы входа

В этом шаге вы стилизуете форму входа.

1. Добавьте следующий CSS-код в файл css/style.css:

.content > img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-left: 125px;
  margin-top: -100px;
}

.content-container {
  margin: 100px auto;
  width: 450px;
  height: 600px;
  background-color: rgb(0, 0, 0, 0.45);
  border-radius: 10px;
}

.form {
  text-align: center;
}

.form > h2 {
  font-size: 45px;
  font-weight: 800;
  margin-bottom: 20px;
}

button {
  width: 80px;
  height: 30px;
  border: #041c32;
  background-color: #2d4263;
  font-size: 16px;
  color: white;
  margin: 10px;
}

input {
  font-size: 20px;
  border-radius: 5px;
  width: 300px;
  margin: 10px;
}

.text {
  text-align: center;
  margin: 10px;
}

.text > a {
  text-decoration: none;
  color: white;
}

Этот код стилизует форму входа, включая изображение аватара, контейнер формы, элементы формы (заголовок, кнопка и поля ввода) и текст внизу формы.

Проверка и тестирование итогового результата

В этом шаге вы можете проверить сходство своей завершенной страницы с фактически данной страницей.

1. Сохраните изменения в файле style.css.
2. Обновите браузер, чтобы увидеть итоговый результат. После завершения предыдущих шагов вы сможете научиться разместить и украсить страницу с помощью синтаксиса CSS, чтобы ваша страница входа была как можно более похожа на следующую:

Поздравляем! Вы успешно завершили проект по преображеню страницы входа.

Резюме

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