Kako stvoriti naslagani obrazac u CSS -u

Kako stvoriti naslagani obrazac u CSS -u

CSS pripada jedinstvenoj klasi jezika, poznatoj kao jezici stilskih listova. Uglavnom se koristi za definiranje prezentacije vaše web stranice. Iako vam HTML omogućuje da navedete kako bi vaša stranica trebala biti strukturirana, za oblikovanje se koristi CSS. U suprotnom ćete dobiti prilično neprivlačnu web stranicu.





Usredotočenost na CSS jedan je od boljih načina za poboljšanje privlačnosti vaše web stranice, posebno kada je u pitanju poboljšanje vašeg korisničkog iskustva. Na ovaj način možete povećati i promet. Za početak, možete koristiti složen obrazac.



Što je složen obrazac?

Naslagani obrazac omogućuje vam stvaranje specijaliziranog obrasca u koji svoje oznake i unose možete postaviti jedno na drugo, umjesto da ih postavljate u vodoravni uzorak.





Evo kako to možete učiniti.

Kodirajte HTML

Upotrijebite HTML element, , za obradu vaših podataka. Dodajte oznake za relevantna polja i dodijelite odgovarajuća polja za unos. U ovom primjeru tražimo od korisnika da navedu svoje puno ime i adresu e -pošte s tipom unosa obrasca tekst , dok se padajući izbornik izrađuje putem odaberite id kako bi im pomogli u odabiru djelatnosti.







What Is a Stacked Form?


Here's how you create a stacked form.



Full Name

Email Address

Department

Information Technology
Customer Support
Sales





Međutim, izvođenje ovog dijela koda proizvest će samo blagi oblik bez okomitog slaganja polja. I tu ćete morati dodati CSS.



kako izbrisati ostalo u pohrani za iPhone

Kodirajte CSS dio

Sada stvorite zasebnu tablicu stilova i dodajte je u svoj HTML prije oznake tijela:


Zatim odaberite tijelo HTML -a, vrste unosa i spremnik te ih stilizirajte kroz CSS. To će uključivati ​​eksperimentiranje s različitim CSS svojstvima, kao što su obitelj fontova, širina, padding, margin, display, border itd., Te dodati željene vrijednosti. Na taj ćete način dobiti složen obrazac koji odgovara vašim točnim preferencijama. Evo primjera.




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

Provjerite izlaz ispod.

Sada možete stvoriti naslagani obrazac u CSS -u

Pomoću ovog članka naučili ste kako stvoriti složen obrazac u CSS -u. S praksom ćete moći poboljšati svoje obrasce i učiniti svoju web stranicu lakšom za korištenje.

pažnja sim nije dodijeljena mm#2

Naziv programske igre je 'vježba'. Iz dana u dan usavršavajte svoje CSS vještine izložbenim projektima kako biste postali moderan web dizajner i učinkovitiji web programer.

Udio Udio Cvrkut E -pošta 10 jednostavnih primjera CSS koda koje možete naučiti za 10 minuta

Trebate pomoć s CSS -om? Za početak isprobajte ove osnovne primjere CSS koda, a zatim ih primijenite na vlastite web stranice.

Pročitajte Dalje Povezane teme
  • Programiranje
  • Web razvoj
  • CSS
O autoru Usman Ghani(Objavljena 4 članka)

Usman je prodavač sadržaja koji je pomogao nekoliko tvrtki s organskim rastom na digitalnim platformama. Voli i programiranje i pisanje, što znači da je tehničko pisanje nešto u čemu jako voli. Kad ne radi, Usman voli provoditi vrijeme gledajući TV emisije, pratiti kriket i čitati o analizi podataka.

Više od Usmana Ghanija

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu