Поле ввода
Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 52 из 76.
Задание
ЛегкоВ этом уроке мы улучшим внешний вид полей ввода, чтобы сделать их удобными для пользователя.
Стилизуйте поля <input>. Выполните следующие шаги:
- Сделайте их шириной 100%, чтобы они хорошо вписывались в форму.
- Добавьте padding, чтобы текст внутри не касался краев.
- Примените border мягкого цвета.
- Сделайте углы закругленными.
- Добавьте margin между полями ввода, чтобы они не располагались слишком близко друг к другу.
- Используйте box-sizing: border-box;, чтобы ширина включала внутренние отступы и границы.
Попробуйте сами
<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Финальные испытания
Расположение элементовСписок фильмовСвадебное приглашениеВсплывающее уведомление