Home-theater-designers
CSS tillhör en unik språkklass, känd som stilarkspråk. Det används främst för att definiera din webbsides presentation. Medan HTML låter dig ange hur din sida ska vara uppbyggd, är det CSS som används för att utforma den. Annars kommer du att få en ganska otrevlig webbplats.
Att fokusera på CSS är ett av de bättre sätten att förbättra webbplatsens överklagande, särskilt när det gäller att förbättra din användarupplevelse. På så sätt kan du också öka din trafik. Till att börja med kan du använda en staplad form.
Vad är en staplad form?
Ett staplat formulär låter dig skapa ett specialiserat formulär där du kan placera dina etiketter och inmatningar ovanpå varandra, snarare än att placera dem i ett horisontellt mönster.
Så här kan du göra det.
Kod HTML
Använd HTML -elementet, , för att behandla din information. Lägg till etiketter för relevanta fält och tilldela relevanta inmatningsfält. I det här exemplet ber vi användare att ange sitt fullständiga namn och e -postadress med formulärets inmatningstyp text , medan en rullgardinsmeny skapas via välj id för att hjälpa dem att välja sin bransch.
What Is a Stacked Form?
Here's how you create a stacked form.
Full Name
Email Address
Department
Information Technology
Customer Support
Sales
Att köra den här koden kommer dock bara att producera en intetsägande form utan att fälten vertikalt staplas. Och det är där du måste lägga till CSS.
kan jag använda wifi i flygplansläge
Kod CSS -delen
Skapa nu ett separat formatmall och lägg till det i din HTML innan kroppstaggen:
Välj sedan din HTML -kropp, inmatningstyper och behållare och formatera dem genom CSS. Detta inkluderar att experimentera med olika CSS-egenskaper, till exempel teckensnittsfamilj, bredd, vaddering, marginal, display, kantlinje, etc. och lägga till dina föredragna värden. På så sätt kommer du att få en staplad form som passar dina exakta preferenser. Här är ett exempel.
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;
}
Kontrollera utmatningen nedan.
Nu kan du skapa ett staplat formulär i CSS
Med den här artikeln har du lärt dig hur du skapar ett staplat formulär i CSS. Med övning kommer du att kunna förfina dina formulär och göra din webbplats mer användarvänlig.
sätt iphone 8 i återställningsläge
Namnet på programmeringsspelet är 'träning'. Finslipa dina CSS -färdigheter dag ut och dag in med utställningsprojekt för att bli en snygg webbdesigner och effektivare webbutvecklare.
Dela med sig Dela med sig Tweet E-post 10 enkla CSS -kodexempel du kan lära dig på 10 minuterBehöver du hjälp med CSS? Prova dessa grundläggande CSS -kodexempel till att börja med och applicera dem sedan på dina egna webbsidor.
Läs Nästa Relaterade ämnen- Programmering
- Webbutveckling
- CSS
Usman är en innehållsmarknadsförare som har hjälpt flera företag med organisk tillväxt på digitala plattformar. Han gillar både programmering och att skriva, vilket innebär att tekniskt skrivande är något han tycker mycket om. När han inte arbetar tycker han om att titta på tv -program, följa cricket och läsa om dataanalys.
Mer från Usman GhaniPrenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!
Klicka här för att prenumerera