CSS принадлежит к уникальному классу языков, известному как языки таблиц стилей. В основном он используется для определения представления вашей веб-страницы. В то время как HTML позволяет вам указать, как ваша страница должна быть структурирована, для ее стилизации используется CSS. В противном случае вы получите довольно непривлекательный веб-сайт.
Сосредоточение внимания на CSS - один из лучших способов повысить привлекательность вашего веб-сайта, особенно когда речь идет об улучшении взаимодействия с пользователем. Таким образом, вы также можете увеличить свой трафик. Для начала можно использовать сложенную форму.
Что такое сложенная форма?
Сложенная форма позволяет вам создать специализированную форму, в которой вы можете размещать метки и поля ввода друг над другом, а не размещать их по горизонтали.
Вот как это сделать.
Закодируйте HTML
Используйте элемент HTML, , чтобы обработать вашу информацию. Добавьте метки для соответствующих полей и назначьте соответствующие поля ввода. В этом примере мы просим пользователей указать свое полное имя и адрес электронной почты вместе с типом ввода формы. текст , тогда как раскрывающееся меню создается через выберите идентификатор чтобы помочь им выбрать свою отрасль.
What Is a Stacked Form?
Here's how you create a stacked form.
Full Name
Email Address
Department
Information Technology
Customer Support
Sales
Однако запуск этого фрагмента кода приведет к созданию только мягкой формы без вертикального расположения полей. И здесь вам нужно будет добавить CSS.
как узнать, настоящий ли сахарный папочка
Кодируйте часть CSS
Теперь создайте отдельную таблицу стилей и добавьте ее в свой HTML перед тегом body:
Затем выберите тело HTML, типы ввода и контейнер и стилизуйте их с помощью CSS. Это будет включать в себя эксперименты с различными свойствами CSS, такими как font-family, width, padding, margin, display, border и т. Д., И добавление ваших предпочтительных значений. Таким образом, вы получите сложенную форму, которая соответствует вашим предпочтениям. Вот пример.
body {
font-family: Calibri;
}
input[type=text], select {
width: 25%;
padding: 12px 20px;
margin: 8px 10;
display: list-item;
border: 4px double #39A9DB;
border-radius: 8px;
box-sizing: border-box;
}
input[type=submit] {
width: 25%;
background-color: #F8E2E6;
color: #0000FF;
padding: 12px 18px;
margin: 20px 0;
border: none;
border-radius: 6px;
cursor: pointer;
}
div.container {
border-radius: 10px;
background-color: #39A9DB;
padding: 40px;
}
Проверьте вывод ниже.
Теперь вы можете создать составную форму в CSS
Из этой статьи вы узнали, как создать составную форму в CSS. Со временем вы сможете улучшить свои формы и сделать свой веб-сайт более удобным для пользователей.
как запустить скрипт python при запуске raspberry pi
Название игры по программированию - «практика». Оттачивайте свои навыки CSS изо дня в день с выставочными проектами, чтобы стать стильным веб-дизайнером и более эффективным веб-разработчиком.
Делиться Делиться Твитнуть Эл. адрес 10 простых примеров кода CSS, которые вы можете изучить за 10 минутНужна помощь с CSS? Для начала попробуйте эти базовые примеры кода CSS, а затем примените их к своим собственным веб-страницам.
Читать далее Похожие темы- Программирование
- Веб-разработка
- CSS
Усман - контент-маркетолог, который помог нескольким компаниям добиться органического роста на цифровых платформах. Ему нравится как программировать, так и писать, а это значит, что техническое письмо - это то, что ему очень нравится. В свободное от работы время Усман любит смотреть телешоу, следить за крикетом и читать об аналитике данных.
Ещё от Usman GhaniПодписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!
Нажмите здесь, чтобы подписаться