Home-theater-designers
CSS gehört zu einer einzigartigen Klasse von Sprachen, die als Stylesheet-Sprachen bekannt sind. Es wird hauptsächlich verwendet, um die Präsentation Ihrer Webseite zu definieren. Während Sie mit HTML angeben können, wie Ihre Seite strukturiert sein soll, wird CSS verwendet, um sie zu gestalten. Andernfalls erhalten Sie eine ziemlich unattraktive Website.
Die Konzentration auf CSS ist eine der besseren Möglichkeiten, die Attraktivität Ihrer Website zu verbessern, insbesondere wenn es darum geht, Ihre Benutzererfahrung zu verbessern. Auf diese Weise können Sie auch Ihren Traffic erhöhen. Für den Anfang können Sie ein gestapeltes Formular verwenden.
Was ist ein gestapeltes Formular?
Mit einem gestapelten Formular können Sie ein spezielles Formular erstellen, in dem Sie Ihre Beschriftungen und Eingaben übereinander platzieren können, anstatt sie in einem horizontalen Muster zu platzieren.
So können Sie es tun.
HTML codieren
Verwenden Sie das HTML-Element, , um Ihre Daten zu verarbeiten. Fügen Sie Beschriftungen für die relevanten Felder hinzu und weisen Sie die entsprechenden Eingabefelder zu. In diesem Beispiel bitten wir die Benutzer, ihren vollständigen Namen und ihre E-Mail-Adresse mit dem Eingabetyp des Formulars anzugeben Text , während über . ein Dropdown-Menü erstellt wird ID auswählen um ihnen bei der Auswahl ihrer Branche zu helfen.
What Is a Stacked Form?
Here's how you create a stacked form.
Full Name
Email Address
Department
Information Technology
Customer Support
Sales
Das Ausführen dieses Codestücks erzeugt jedoch nur ein leeres Formular, ohne die Felder vertikal zu stapeln. Und hier müssen Sie CSS hinzufügen.
verbraucht Firefox weniger RAM als Chrome?
Den CSS-Teil codieren
Erstellen Sie nun ein separates Stylesheet und fügen Sie es Ihrem HTML-Code vor dem body-Tag hinzu:
Wählen Sie als Nächstes den Textkörper, die Eingabetypen und den Container Ihres HTML-Codes aus und gestalten Sie sie mit CSS. Dazu gehört das Experimentieren mit verschiedenen CSS-Eigenschaften , wie z. B. font-family, width, padding, margin, display, border usw., und fügen Sie Ihre bevorzugten Werte hinzu. Auf diese Weise erhalten Sie ein gestapeltes Formular, das genau Ihren Vorlieben entspricht. Hier ist ein Beispiel.
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;
}
Überprüfen Sie die Ausgabe unten.
Jetzt können Sie ein gestapeltes Formular in CSS erstellen
In diesem Artikel haben Sie erfahren, wie Sie ein gestapeltes Formular in CSS erstellen. Mit etwas Übung werden Sie in der Lage sein, Ihre Formulare zu verfeinern und Ihre Website benutzerfreundlicher zu gestalten.
was macht die imei nummer
Der Name des Programmierspiels ist 'Übung'. Verbessern Sie Ihre CSS-Kenntnisse Tag für Tag mit Ausstellungsprojekten, um ein stilvoller Webdesigner und effizienter Webentwickler zu werden.
Teilen Teilen Tweet Email 10 einfache CSS-Codebeispiele, die Sie in 10 Minuten lernen könnenBrauchen Sie Hilfe bei CSS? Probieren Sie zunächst diese grundlegenden CSS-Codebeispiele aus und wenden Sie sie dann auf Ihre eigenen Webseiten an.
Weiter lesen Verwandte Themen- Programmierung
- Web Entwicklung
- CSS
Usman ist ein Content-Marketer, der mehreren Unternehmen beim organischen Wachstum auf digitalen Plattformen geholfen hat. Er mag sowohl das Programmieren als auch das Schreiben, was bedeutet, dass ihm das Technische Schreiben sehr viel Spaß macht. Wenn er nicht arbeitet, verbringt Usman gerne Zeit damit, Fernsehsendungen anzusehen, Cricket zu verfolgen und über Datenanalyse zu lesen.
Mehr von Usman GhaniAbonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um sich zu abonnieren