Home-theater-designers
I CSS appartengono a un'unica classe di linguaggi, noti come linguaggi per fogli di stile. Viene utilizzato principalmente per definire la presentazione della tua pagina web. Mentre l'HTML ti consente di specificare come dovrebbe essere strutturata la tua pagina, è il CSS che viene utilizzato per modellarla. Altrimenti, ti ritroverai con un sito Web piuttosto sgradevole.
Concentrarsi sui CSS è uno dei modi migliori per migliorare l'attrattiva del tuo sito web, soprattutto quando si tratta di migliorare la tua esperienza utente. In questo modo puoi anche aumentare il tuo traffico. Per cominciare, puoi usare un modulo impilato.
Che cos'è un modulo impilato?
Un modulo impilato consente di creare un modulo specializzato in cui è possibile posizionare le etichette e gli input uno sopra l'altro, anziché posizionarli in uno schema orizzontale.
Ecco come puoi farlo.
Codifica l'HTML
Usa l'elemento HTML, , per elaborare le tue informazioni. Aggiungi etichette per i campi pertinenti e assegna i campi di input pertinenti. In questo esempio, chiediamo agli utenti di fornire il loro nome completo e indirizzo e-mail con il tipo di input del modulo testo , mentre un menu a tendina viene creato tramite seleziona id per aiutarli a scegliere il loro settore.
What Is a Stacked Form?
Here's how you create a stacked form.
Full Name
Email Address
Department
Information Technology
Customer Support
Sales
Tuttavia, l'esecuzione di questo pezzo di codice produrrà solo un modulo blando senza impilare verticalmente i campi. Ed è qui che dovrai aggiungere CSS.
trova l'indirizzo IP della stampante Windows 10
Codifica la parte CSS
Ora crea un foglio di stile separato e aggiungilo al tuo codice HTML prima del tag body:
Quindi, seleziona il corpo del tuo HTML, i tipi di input e il contenitore e modellali tramite CSS. Ciò includerà la sperimentazione di diverse proprietà CSS , come la famiglia di caratteri, la larghezza, il riempimento, il margine, la visualizzazione, il bordo e così via e l'aggiunta dei valori preferiti. In questo modo, ti ritroverai con un modulo impilato che si adatta alle tue esatte preferenze. Ecco un esempio.
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;
}
Controlla l'output qui sotto.
Ora puoi creare un modulo impilato in CSS
Con questo articolo, hai imparato come creare un modulo impilato in CSS. Con la pratica, sarai in grado di perfezionare i tuoi moduli e rendere il tuo sito web più user-friendly.
come cambiare l'immagine del profilo netflix
Il nome del gioco di programmazione è 'pratica'. Affina le tue abilità CSS giorno dopo giorno con progetti espositivi per diventare un web designer elegante e uno sviluppatore web più efficiente.
Condividere Condividere Tweet E-mail 10 semplici esempi di codice CSS che puoi imparare in 10 minutiHai bisogno di aiuto con i CSS? Prova questi esempi di codice CSS di base per iniziare, quindi applicali alle tue pagine web.
Leggi Avanti Argomenti correlati- Programmazione
- Sviluppo web
- CSS
Usman è un marketer di contenuti che ha aiutato diverse aziende con una crescita organica su piattaforme digitali. Gli piace sia la programmazione che la scrittura, il che significa che la scrittura tecnica è qualcosa che gli piace molto. Quando non lavora, Usman si diverte a guardare programmi TV, seguire il cricket e leggere informazioni sull'analisi dei dati.
Altro da Usman GhaniIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti