Home-theater-designers
CSS tilhører en unik klasse språk, kjent som stilarkspråk. Den brukes hovedsakelig til å definere nettsidens presentasjon. Mens HTML lar deg spesifisere hvordan siden din skal struktureres, er det CSS som brukes til å style den. Ellers vil du ende opp med et ganske lite tiltalende nettsted.
Fokusering på CSS er en av de bedre måtene å forbedre nettstedets appell, spesielt når det gjelder å forbedre brukeropplevelsen din. På denne måten kan du også øke trafikken. Til å begynne med kan du bruke et stablet skjema.
Hva er et stablet skjema?
Et stablet skjema lar deg lage et spesialisert skjema der du kan plassere etikettene og inngangene på hverandre, i stedet for å plassere dem i et horisontalt mønster.
Slik gjør du det.
Kode HTML
Bruk HTML -elementet, , for å behandle informasjonen din. Legg til etiketter for de relevante feltene og tilordne de relevante inndatafeltene. I dette eksemplet ber vi brukerne om å oppgi hele navnet og e -postadressen med inndatatypen for skjemaet tekst , mens en rullegardinmeny opprettes via velg id for å hjelpe dem med å velge sin bransje.
What Is a Stacked Form?
Here's how you create a stacked form.
Full Name
Email Address
Department
Information Technology
Customer Support
Sales
Imidlertid vil kjøring av denne koden bare gi en blid form uten å stable feltene vertikalt. Og det er der du må legge til CSS.
koble Android -telefonen til skjermen og tastaturet
Kode CSS -delen
Lag nå et eget stilark og legg det til HTML -koden din før brødteksten:
Velg deretter HTML -kroppen din, inndatatyper og beholder, og style dem gjennom CSS. Dette vil inkludere eksperimentering med forskjellige CSS-egenskaper, for eksempel skriftfamilie, bredde, polstring, margin, skjerm, kantlinje, etc., og legge til foretrukne verdier. På denne måten vil du ende opp med et stablet skjema som passer dine eksakte preferanser. Her er et eksempel.
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;
}
Sjekk utgangen nedenfor.
Nå kan du opprette et stablet skjema i CSS
Med denne artikkelen har du lært hvordan du lager et stablet skjema i CSS. Med praksis vil du kunne finpusse skjemaene dine og gjøre nettstedet ditt mer brukervennlig.
hvordan gjøre meg usynlig på facebook
Navnet på programmeringsspillet er 'øvelse'. Finpuss CSS -ferdighetene dine dag ut og dag inn med utstillingsprosjekter for å bli en stilig webdesigner og mer effektiv webutvikler.
Dele Dele kvitring E -post 10 enkle CSS -kodeeksempler du kan lære på 10 minutterTrenger du hjelp med CSS? Prøv disse grunnleggende CSS -kodeeksemplene til å begynne med, og bruk dem deretter på dine egne websider.
Les neste Relaterte temaer- Programmering
- Webutvikling
- CSS
Usman er en innholdsmarkedsfører som har hjulpet flere virksomheter med organisk vekst på digitale plattformer. Han liker både programmering og skriving, noe som betyr at teknisk skriving er noe han liker godt. Når han ikke jobber, liker Usman å bruke tid på å se på TV -programmer, følge cricket og lese om dataanalyse.
Mer fra Usman GhaniAbonner på vårt nyhetsbrev
Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!
Klikk her for å abonnere