Home-theater-designers
CSS tilhører en unik klasse sprog, kendt som stilarksprog. Det bruges hovedsageligt til at definere din websides præsentation. Selvom HTML lader dig angive, hvordan din side skal struktureres, er det CSS, der bruges til at style den. Ellers ender du med et temmelig utiltalende websted.
Fokus på CSS er en af de bedre måder at forbedre dit websteds appel, især når det kommer til at forbedre din brugeroplevelse. På denne måde kan du også øge din trafik. Til at begynde med kan du bruge en stablet form.
Hvad er en stablet form?
En stablet formular giver dig mulighed for at oprette en specialiseret formular, hvor du kan placere dine etiketter og input oven på hinanden i stedet for at placere dem i et vandret mønster.
Sådan kan du gøre det.
Kode HTML
Brug HTML -elementet, , til at behandle dine oplysninger. Tilføj etiketter til de relevante felter, og tildel de relevante inputfelter. I dette eksempel beder vi brugerne om at angive deres fulde navn og e -mail -adresse med formularens inputtype tekst , hvorimod en rullemenu oprettes via vælg id at hjælpe dem med at vælge deres branche.
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 kørsel af dette stykke kode kun producere en intetsigende form uden at stakke felterne lodret. Og det er her, du skal tilføje CSS.
hvordan man bruger efterskole -appen
Kode CSS -delen
Opret nu et separat typografiark og tilføj det til din HTML før brødteksten:
Vælg derefter din HTML -krop, inputtyper og beholder og stil dem gennem CSS. Dette vil omfatte at eksperimentere med forskellige CSS-egenskaber, såsom skrifttypefamilie, bredde, polstring, margen, display, kant osv. Og tilføje dine foretrukne værdier. På denne måde ender du med en stablet form, der passer til dine præcise præferencer. 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;
}
Kontroller output herunder.
Nu kan du oprette en stablet formular i CSS
Med denne artikel har du lært, hvordan du opretter en stablet formular i CSS. Med praksis vil du kunne forfine dine formularer og gøre dit websted mere brugervenligt.
hvordan man spiller minecraft med en ven
Navnet på programmeringsspillet er 'øvelse'. Finpudse dine CSS -færdigheder dag ud og dag ind med udstillingsprojekter for at blive en stilfuld webdesigner og mere effektiv webudvikler.
Del Del Tweet E -mail 10 simple CSS -kodeeksempler, du kan lære på 10 minutterBrug for hjælp til CSS? Prøv disse grundlæggende CSS -kodeeksempler til at starte med, og anvend dem derefter på dine egne websider.
Læs Næste Relaterede emner- Programmering
- Web-udvikling
- CSS
Usman er en indholdsmarkeder, der har hjulpet flere virksomheder med organisk vækst på digitale platforme. Han kan lide både at programmere og skrive, hvilket betyder, at teknisk skrivning er noget, han nyder meget. Når han ikke arbejder, nyder Usman at bruge tid på at se tv -shows, følge cricket og læse om dataanalyse.
Mere fra Usman GhaniAbonner på vores nyhedsbrev
Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!
Klik her for at abonnere