Caselle a discesa sono una funzionalità comuni dell'interfaccia utente web. Gli utenti di Internet sono abituati a utilizzare e interagire con caselle a discesa. Inoltre, sono facili da implementare. Se sei un web designer o sviluppatore, caselle a discesa sarà una parte essenziale del vostro toolkit di interazione utente. Essi richiedono meno lavoro da usare rispetto all'input del testo semplice e chiedere meno dell'utente. Questo è molto utile, come gli utenti in genere non piacciono pensare troppo a come interagire con il tuo sito.

Istruzioni

Che fanno la goccia giù casella

1

Aprite il vostro editor di testo preferito. Ha bisogno di essere in grado di salvare in formati di file arbitrari o lasciare che l'utente, specificare un formato. Abbiamo bisogno di questa funzionalità perché abbiamo bisogno di salvare la pagina in formato ". html".

2

Digitare l'elenco degli articoli che desideri avere in una casella di riepilogo a discesa.

3

Mettere un tag "< select >" sopra l'elenco degli elementi nella tua casella di riepilogo e mettere un tag "< / selezionare >" sotto l'elenco degli elementi nella tua casella di riepilogo a discesa. Questi tag verranno dirà il browser che il contenuto tra appartiene a una casella di riepilogo a discesa.

4

Racchiudere ogni elemento nell'elenco con il tag "< option >" e "< / option >." Questi dire al browser che ogni voce tra i tag è un'opzione nella tua casella di riepilogo a discesa.

5

Salvare il file con qualsiasi nome e aggiungere l'estensione ". html". Si può quindi aprire la pagina con il browser web e guardare la casella a discesa.

Posizionamento e Styling la tua goccia tendina

6

Aggiungere una proprietà di stile per il tag "< select >" della tua casella di riepilogo a discesa. Il nuovo tag dovrebbe assomigliare "< selezionare stile =" ">." Questo è dove tutte le informazioni su come dovrebbe apparire il menu a tendina andrà.

7

Aggiungere i margini per posizionare la goccia giù casella. Il tag "< select >" dovrebbe apparire come "< selezionare style =" margin-top: 100px; " >. " Le proprietà dei quattro margini disponibili sono margine-top, margin-bottom, margin-left e margin-right. È possibile combinare più proprietà nella proprietà style. Devono essere separati da punti e virgola in questo modo: "< selezionare style =" margin-top: 100px; margin-left: 100px; " >. "

8

Aggiungere qualsiasi altro stile che desideri nella casella. È possibile modificare il colore aggiungendo la proprietà colore di sfondo come "< selezionare style =" margin-top: 100px; margin-left: 100px; background-color: red; " >. "