Home-theater-designers
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 преди маркера на тялото:
След това изберете тялото на HTML, типовете за въвеждане и контейнера и ги оформете чрез CSS. Това ще включва експериментиране с различни свойства на CSS, като семейство шрифтове, ширина, пълнеж, поле, дисплей, граница и т.н., и добавяне на предпочитаните от вас стойности. По този начин ще получите подредена форма, която отговаря на вашите точни предпочитания. Ето един пример.
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. С практиката ще можете да усъвършенствате формулярите си и да направите уебсайта си по-лесен за употреба.
уебсайт за гледане на филми с приятели
Името на програмиращата игра е „практика“. Усъвършенствайте CSS уменията си ден след ден с изложбени проекти, за да станете стилен уеб дизайнер и по -ефективен уеб разработчик.
Дял Дял Туит електронна поща 10 прости примера за CSS код, които можете да научите за 10 минутиНуждаете се от помощ с CSS? Опитайте тези основни примери за CSS код, за да започнете, след което ги приложите към собствените си уеб страници.
Прочетете Напред Свързани теми- Програмиране
- Уеб разработка
- CSS
Usman е маркетинг на съдържание, който е помогнал на няколко бизнеса с органичен растеж в цифрови платформи. Той харесва както програмирането, така и писането, което означава, че техническото писане е нещо, което много му харесва. Когато не работи, Usman обича да прекарва времето си в гледане на телевизионни предавания, след крикет и четене за анализ на данни.
Още от Usman GhaniАбонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!
Щракнете тук, за да се абонирате