Контейнер формы
Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 51 из 76.
Задание
ЛегкоВ этом уроке мы сделаем форму более структурированной и визуально привлекательной.
Выполните следующие шаги:
- Примените стили к контейнеру формы, чтобы выделить его. Напишите CSS-правило, которое нацелено на элемент с классом
login-form.- Установите цвет фона (белый или любой другой подходящий цвет).
- Добавьте padding (внутренний отступ), чтобы внутри контента было свободное пространство.
- Сделайте углы закругленными.
- Примените box-shadow, чтобы создать мягкий эффект парения.
- Добавьте border (границу) вокруг формы (выберите любой цвет и толщину).
- Выровняйте текст внутри формы по центру, используя свойство
text-align.
Попробуйте сами
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
Все уроки раздела Styling with CSS
4Основы работы с текстом
Цвет текстаСемейство шрифтовРазмер шрифтаНасыщенность шрифтаВыравнивание текстаОформление текстаПовторение: Задача №1Повторение: Задача №2
11Методы верстки
Блочные и строчные элементыОсновы позиционированияОтносительное позиционированиеАбсолютное позиционированиеФиксированное позиционированиеОсновы Z-IndexИтоговое испытание14Финальные испытания
Расположение элементовСписок фильмовСвадебное приглашениеВсплывающее уведомление