Pinotun lomakkeen luominen CSS: ään

CSS kuuluu ainutlaatuiseen kieliluokkaan, joka tunnetaan tyylitaulukon kielinä. Sitä käytetään pääasiassa verkkosivusi esityksen määrittämiseen. Vaikka HTML: n avulla voit määrittää, miten sivusi tulisi rakentaa, CSS: ää käytetään sen muotoiluun. Muuten saat melko houkuttelevan verkkosivuston.

CSS: ään keskittyminen on yksi parhaista tavoista parantaa verkkosivustosi houkuttelevuutta, varsinkin kun on kyse käyttökokemuksen parantamisesta. Näin voit myös lisätä liikennettäsi. Aloittelijoille voit käyttää pinottua lomaketta.

Mikä on pinottu lomake?

Pinotun lomakkeen avulla voit luoda erikoislomakkeen, jossa voit sijoittaa tarrat ja syötteet päällekkäin sen sijaan, että sijoittaisit ne vaakasuoraan kuvioon.

Voit tehdä sen seuraavasti.

Koodaa HTML

Käytä HTML -elementtiä, , käsittelemään tietojasi. Lisää tarrat asianomaisille kentille ja määritä tarvittavat syöttökentät. Tässä esimerkissä pyydämme käyttäjiä antamaan koko nimen ja sähköpostiosoitteen lomakkeen syöttötyypin kanssa teksti , kun taas avattava valikko luodaan kautta valitse tunnus auttaakseen heitä valitsemaan toimialansa.

  
  
  
  
What Is a Stacked Form?
  
Here's how you create a stacked form.
  
  
Full Name  
  
Email Address  
  
Department  
  
Information Technology  
Customer Support  
Sales

Kuitenkin tämän koodin suorittaminen tuottaa vain pehmeän muodon ilman pinoamista pystysuunnassa. Ja siihen sinun on lisättävä CSS.

miten saat puhelimesi näyttämään viileämmältä

Koodaa CSS -osa

Luo nyt erillinen tyylitaulukko ja lisää se HTML -koodiin ennen body -tagia:

Valitse seuraavaksi HTML -koodisi runko, syöttötyypit ja säilö ja muotoile ne CSS: n kautta. Tämä sisältää kokeilun eri CSS-ominaisuuksilla, kuten kirjasinperhe, leveys, täyte, marginaali, näyttö, reuna jne., Ja lisää haluamasi arvot. Näin päädyt pinottuun lomakkeeseen, joka vastaa tarkkoja mieltymyksiäsi. Tässä on esimerkki.

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

Tarkista ulostulo alla.

Nyt voit luoda pinotun lomakkeen CSS: ään

Tämän artikkelin avulla olet oppinut muodostamaan pinotun lomakkeen CSS: ssä. Harjoittelemalla voit hioa lomakkeita ja tehdä sivustostasi käyttäjäystävällisempi.

kytketty kiintolevy ei näy

Ohjelmointipelin nimi on 'harjoitus'. Hio CSS -taitojasi päivä päivältä näyttelyprojekteilla, jotta sinusta tulee tyylikäs web -suunnittelija ja tehokkaampi web -kehittäjä.

Jaa Jaa Tweet Sähköposti 10 yksinkertaista CSS -koodiesimerkkiä, jotka opit 10 minuutissa

Tarvitsetko apua taidon CSS kanssa? Kokeile aluksi näitä CSS -koodin perusesimerkkejä ja käytä niitä sitten omilla verkkosivuillasi.

Lue seuraava Liittyvät aiheet

Ohjelmointi
Verkkokehitys
CSS

Kirjailijasta Usman Ghani(4 artikkelia julkaistu)

Usman on sisältömarkkinoija, joka on auttanut useita yrityksiä orgaanisessa kasvussa digitaalisilla alustoilla. Hän pitää sekä ohjelmoinnista että kirjoittamisesta, mikä tarkoittaa, että tekninen kirjoittaminen on jotain, mistä hän pitää paljon. Kun Usman ei toimi, hän nauttii television katselusta, kriketin seuraamisesta ja data -analytiikan lukemisesta.

Lisää Usman Ghanilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi