Home-theater-designers
CSS pertany a una classe única d'idiomes, coneguts com a llenguatges de fulls d'estil. S'utilitza principalment per definir la presentació de la vostra pàgina web. Tot i que HTML us permet especificar com s’ha d’estructurar la vostra pàgina, el CSS s’utilitza per donar-li estil. En cas contrari, acabareu amb un lloc web força atractiu.
Centrar-se en CSS és una de les millors maneres de millorar l’atractiu del vostre lloc web, sobretot a l’hora de millorar la vostra experiència d’usuari. D’aquesta manera, també podeu augmentar el trànsit. Per començar, podeu utilitzar un formulari apilat.
Què és un formulari apilat?
Un formulari apilat us permet crear un formulari especialitzat on podeu col·locar les vostres etiquetes i entrades una sobre l'altra, en lloc de col·locar-les en un patró horitzontal.
A continuació s’explica com podeu fer-ho.
Codifiqueu l'HTML
Utilitzeu l'element HTML, , per processar la vostra informació. Afegiu etiquetes per als camps rellevants i assigneu-los. En aquest exemple, demanem als usuaris que proporcionin el seu nom complet i adreça electrònica amb el tipus d'entrada del formulari text , mentre que es crea un menú desplegable mitjançant seleccioneu l'identificador per ajudar-los a triar la seva indústria.
What Is a Stacked Form?
Here's how you create a stacked form.
Full Name
Email Address
Department
Information Technology
Customer Support
Sales
No obstant això, l'execució d'aquest tros de codi només produirà una forma anodina sense apilar verticalment els camps. I aquí és on haurà d’afegir CSS.
què cal fer si el telèfon està enganxat a la pantalla de la poma
Codifiqueu la part CSS
Ara, creeu un full d'estil independent i afegiu-lo al vostre HTML abans de l'etiqueta del cos:
A continuació, seleccioneu el cos, els tipus d’entrada i el contenidor del vostre HTML i estileu-los mitjançant CSS. Això inclourà experimentar amb diferents propietats CSS, com ara la família de tipus de lletra, l'amplada, el farciment, el marge, la visualització, la vora, etc., i afegir els vostres valors preferits. D’aquesta manera, acabareu amb un formulari apilat que s’adapti a les vostres preferències exactes. Aquí en teniu un exemple.
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;
}
Comproveu la sortida següent.
Ara podeu crear un formulari apilat a CSS
Amb aquest article, heu après a crear un formulari apilat a CSS. Amb la pràctica, podreu refinar els vostres formularis i fer que el vostre lloc web sigui més fàcil d'utilitzar.
què és una adreça IP per a una impressora
El nom del joc de programació és 'pràctica'. Perfeccioneu el vostre dia a dia les vostres habilitats en CSS amb projectes d'exposicions per convertir-vos en un dissenyador web elegant i desenvolupador web més eficient.
Compartir Compartir Tweet Correu electrònic 10 exemples de codis CSS simples que podeu aprendre en 10 minutsNecessiteu ajuda amb CSS? Proveu aquests exemples bàsics de codi CSS per començar, i apliqueu-los a les vostres pròpies pàgines web.
Llegiu a continuació Temes relacionats- Programació
- Desenvolupament web
- CSS
Usman és un venedor de continguts que ha ajudat diverses empreses amb un creixement orgànic a les plataformes digitals. Li agrada tant programar com escriure, cosa que significa que l’escriptura tècnica li agrada molt. Quan no treballa, a Usman li agrada passar temps veient programes de televisió, seguint el criquet i llegint sobre l’anàlisi de dades.
Més de Usman GhaniSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us