Поле ввода
Часть раздела 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Финальные испытания
Расположение элементовСписок фильмовСвадебное приглашениеВсплывающее уведомлениеПотренируйтесь самостоятельно: Песочница Web