Kako ustvariti zložen obrazec v CSS

Kako ustvariti zložen obrazec v CSS

CSS spada v edinstven razred jezikov, znan kot jeziki slogovnih listov. Uporablja se predvsem za opredelitev predstavitve vaše spletne strani. Čeprav vam HTML omogoča, da določite, kako naj bo vaša stran strukturirana, se za oblikovanje uporablja CSS. V nasprotnem primeru boste dobili precej neprivlačno spletno mesto.





Osredotočenost na CSS je eden boljših načinov za izboljšanje privlačnosti vašega spletnega mesta, zlasti ko gre za izboljšanje vaše uporabniške izkušnje. Na ta način lahko povečate tudi promet. Za začetek lahko uporabite zloženi obrazec.



Kaj je zloženi obrazec?

Zloženi obrazec vam omogoča, da ustvarite specializiran obrazec, kjer lahko svoje oznake in vnose postavite drug na drugega, namesto da jih postavite v vodoravni vzorec.





Evo, kako to lahko storite.

Kodirajte HTML

Uporabite element HTML, , za obdelavo vaših podatkov. Dodajte oznake za ustrezna polja in dodelite ustrezna vnosna polja. V tem primeru od uporabnikov zahtevamo, da navedejo svoje polno ime in e -poštni naslov z vrsto vnosa obrazca besedilo , medtem ko se spustni meni ustvari prek izberite id ki jim bodo pomagali pri izbiri panoge.







What Is a Stacked Form?


Here's how you create a stacked form.



Full Name

Email Address

Department

Information Technology
Customer Support
Sales





Vendar bo izvajanje tega koda ustvarilo le nežno obliko brez navpičnega zlaganja polj. In tam boste morali dodati CSS.



poišči amazonski seznam želja za koga drugega

Kodirajte del CSS

Zdaj ustvarite ločeno slogovno listo in jo dodajte v svoj HTML pred oznako body:


Nato izberite telo HTML, vrste vnosa in vsebnik ter jih oblikujte v CSS. To bo vključevalo eksperimentiranje z različnimi lastnostmi CSS, kot so družina pisav, širina, oblazinjenje, rob, zaslon, obroba itd., Ter dodajanje želenih vrednosti. Na ta način boste dobili zložen obrazec, ki ustreza vašim natančnim željam. Tukaj je primer.




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;
}

Preverite spodnji izhod.

Zdaj lahko ustvarite zloženi obrazec v CSS

S tem člankom ste se naučili ustvariti zloženi obrazec v CSS. S prakso boste lahko izboljšali svoje obrazce in naredili svojo spletno stran uporabniku prijaznejšo.

poiščite IP naslov maline pi

Ime programske igre je 'vaja'. Iz dneva v dan izpopolnjujte svoje sposobnosti CSS z razstavnimi projekti, da postanete eleganten spletni oblikovalec in učinkovitejši spletni razvijalec.

Deliti Deliti Cvrkutati E-naslov 10 preprostih primerov kode CSS, ki se jih lahko naučite v 10 minutah

Potrebujete pomoč pri CSS? Za začetek preizkusite te osnovne primere kode CSS, nato pa jih uporabite na svojih spletnih straneh.

Preberite Naprej Sorodne teme
  • Programiranje
  • Spletni razvoj
  • CSS
O avtorju Usman Ghani(4 objavljeni članki)

Usman je tržnik vsebin, ki je pomagal številnim podjetjem pri organski rasti na digitalnih platformah. Rad ima tako programiranje kot pisanje, kar pomeni, da je tehnično pisanje nekaj, v čemer zelo uživa. Kadar ne dela, Usman uživa v gledanju televizijskih oddaj, spremljanju kriketa in branju o analitiki podatkov.

Več od Usmana Ghanija

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, če se želite naročiti