Hvordan lage en drop down boks ut av en liste

Drop down boksene er en felles web brukergrensesnitt funksjonen. Brukere av Internet er vant til å bruke og samhandle med drop down bokser. I tillegg er de enkle å implementere. Hvis du er en webdesigner eller utvikler, drop down boksene vil være en viktig del av brukermedvirkning verktøykasse. De krever mindre arbeid å bruke enn enkel skriving og inneholder mindre av brukeren. Dette er svært gunstig, som brukerne vanligvis ikke liker å tenke for mye om hvordan du bruker nettstedet ditt.

Bruksanvisning

Making rullegardinlisten

1 Åpne din favoritt teksteditor. Det må være i stand til å spare til vilkårlige filformater eller la deg, brukeren, angi et format. Vi trenger denne funksjonen, fordi vi trenger å lagre siden i ".html" format.

2 Skriv ut listen over elementer du vil ha i en drop down boks.

3 Sett en "<Velg>" tag over listen med elementer i rullegardinlisten og sette en "</ select>" tag under listen over elementer i nedtrekkslisten. Disse kodene vil fortelle nettleseren som tilhører innholdet mellom i en drop down boks.

4 Legg ved hvert av elementene i listen med kodene "<alternativ>" og "</ option>". Disse forteller nettleseren at hvert element mellom kodene er et alternativ i nedtrekkslisten.

5 Lagre filen ut med noen navn og legge til ".html" forlengelse. Deretter kan du åpne siden med din nettleser og se på rullegardinlisten.

Posisjonering og Styling Din Drop Down Box

6 Legg en stil til "<Velg>" tag på rullegardinlisten. Den nye koden skal se ut "<velg style =" ">". Det er der all informasjon om hvordan rullegardin skal se vil gå.

7 Legg marginer for å plassere rullegardinlisten. Din "<Velg>" tag skal nå se ut som "<velg style =" margin-top: 100px; ">". De fire margin egenskaper tilgjengelig er margin-top, margin-bottom, margin-left og margin-right. Du kan kombinere flere eiendommer i stil. De må skilles med semikolon slik: "<velg style =" margin-top: 100px; margin-left: 100px; ">".

8 Legg til eventuelle andre stiler du ønsker til boksen. Du kan endre farge ved å legge til background-color eiendom som "<velg style =" margin-top: 100px; margin-left: 100px; background-color: red; ">".