Kuidas luua virnastatud vormi CSS -is

CSS kuulub ainulaadsesse keelte klassi, mida nimetatakse stiililehtede keelteks. Seda kasutatakse peamiselt teie veebisaidi esitluse määratlemiseks. Kuigi HTML võimaldab teil määrata, kuidas teie leht üles peaks ehitama, kasutatakse selle kujundamiseks CSS -i. Vastasel juhul saate üsna ebameeldiva veebisaidi.

CSS -ile keskendumine on üks paremaid viise veebisaidi atraktiivsuse parandamiseks, eriti kui tegemist on kasutajakogemuse parandamisega. Nii saate ka oma liiklust suurendada. Alustuseks võite kasutada virnastatud vormi.

Mis on virnastatud vorm?

Virnastatud vorm võimaldab teil luua spetsiaalse vormi, kus saate sildid ja sisendid üksteise peale asetada, mitte horisontaalsele mustrile paigutada.

Seda saate teha järgmiselt.

Kodeerige HTML

Kasutage HTML -i elementi, , teie teabe töötlemiseks. Lisage vastavatele väljadele sildid ja määrake asjakohased sisestusväljad. Selles näites palume kasutajatel esitada vormi sisenditüübiga oma täisnimi ja e -posti aadress teksti , samas kui rippmenüü luuakse kaudu vali id et aidata neil oma tööstusharu valida.

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

Selle kooditüki käivitamine tekitab aga ainult õrna vormi ilma väljade vertikaalset virnastamist. Ja sinna peate lisama CSS -i.

kella valvuri ajalõpp Windows 10 installimine

Kodeerige CSS -i osa

Nüüd looge eraldi stiilileht ja lisage see oma HTML -i enne keha märgendit:

Seejärel valige oma HTML -i sisu, sisenditüübid ja konteiner ning kujundage need CSS -i kaudu. See hõlmab erinevate CSS-atribuutidega, näiteks fondiperekonna, laiuse, polsterduse, veerise, kuvari, äärise jne katsetamist ja eelistatud väärtuste lisamist. Nii saate lõpuks virnastatud vormi, mis sobib täpselt teie eelistustega. Siin on näide.

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

Kontrollige väljundit allpool.

Nüüd saate CSS -is luua virnastatud vormi

Selle artikliga olete õppinud, kuidas CSS -is virnastatud vormi luua. Praktika abil saate oma vorme täpsustada ja muuta oma veebisaidi kasutajasõbralikumaks.

kuidas xbox one'i jagada

Programmeerimismängu nimi on 'praktika'. Täiendage oma CSS -i oskusi päevast päeva näituseprojektidega, et saada stiilseks veebidisaineriks ja tõhusamaks veebiarendajaks.

Jaga Jaga Piiksuma E -post 10 lihtsat CSS -koodi näidet, mida saate õppida 10 minutiga

Kas vajate abi CSS -iga? Alustuseks proovige neid CSS -koodi põhinäiteid, seejärel rakendage neid oma veebilehtedele.

Loe edasi Seotud teemad

Programmeerimine
Veebiarendus
CSS

Autori kohta Usman Ghani(4 artiklit avaldatud)

Usman on sisuturundaja, kes on aidanud mitut ettevõtet orgaanilisel kasvul digitaalsetel platvormidel. Talle meeldib nii programmeerimine kui ka kirjutamine, mis tähendab, et tehniline kirjutamine meeldib talle väga. Kui Usman ei tööta, veedab ta hea meelega aega telesaadete vaatamise, kriketi jälgimise ja andmeanalüütika kohta.

Veel Usman Ghanilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin