Das Erstellen von Schaltflächen auf einer Webseite kann sehr hilfreich sein, um die Benutzerfreundlichkeit einer Website zu verbessern. Besonders wichtig ist die Platzierung von Schaltflächen am unteren Rand des Bildschirms, da dieser Ort für den Benutzer am besten zugänglich ist und die Navigation erleichtert. In diesem Artikel erfahren Sie, wie Sie Schaltflächen am unteren Rand des Bildschirms erstellen.
Schritt 1: HTML-Markup
Der erste Schritt beim Erstellen von Schaltflächen besteht darin, das HTML-Markup zu definieren. Sie müssen für jede Schaltfläche ein separates Element erstellen. Innerhalb des Tags können Sie Text hinzufügen, der auf der Schaltfläche angezeigt wird.
Beispiel für das Markup für Schaltflächen:
Schritt 2: Stilisieren von Schaltflächen mit CSS
Als nächstes müssen Sie mit dem Styling der Schaltflächen mit CSS beginnen. Sie können Schaltflächen mit verschiedenen Eigenschaften wie Hintergrundfarbe, Größe, Schriftart und anderen stilisieren.
Beispiel für Schaltflächenstile:
button
background-color: #4CAF50;
color: white;
padding: 10px 20px;
font-size: 16px;
>
button:hover
background-color: #45a049;
>
Schritt 3: Platzieren von Schaltflächen am unteren Rand des Bildschirms
Sie können die Eigenschaft verwenden, um Schaltflächen am unteren Rand des Bildschirms zu platzieren position: fixed; in CSS. Diese Eigenschaft ermöglicht es dem Element, während des Bildlaufs auf der Seite an einer festen Position zu bleiben. Sie müssen die Position der Schaltflächen mithilfe von Eigenschaften festlegen bottom: 0; und left: 0; so positionieren Sie sie unten in der linken Ecke des Bildschirms.
CSS-Beispiel zum Platzieren von Schaltflächen am unteren Rand des Bildschirms:
button
position: fixed;
bottom: 0;
left: 0;
>
Nachdem Sie diese drei Schritte ausgeführt haben, haben Sie eine funktionale und stilvolle Schaltfläche am unteren Rand des Bildschirms. Denken Sie daran, die Stile an die Anforderungen Ihres Projekts zu testen und anzupassen.
Design-Auswahl
Die Auswahl des richtigen Designs für die Schaltflächen am unteren Rand des Bildschirms ist wichtig, um eine benutzerfreundliche und ansprechende Benutzeroberfläche zu erstellen. Hier sind einige Designoptionen, die Sie verwenden können:
1. Flaches Design
Das flache Design ist ein moderner Trend, der sich durch das Fehlen von Farbverläufen, Schatten und volumetrischen Effekten auszeichnet. Tasten mit flachem Design haben normalerweise ein sauberes und minimalistisches Aussehen, wodurch sie attraktiv und leicht zu erkennen sind.
2. Konvexes Design
Das konvexe Design ist eine klassische Option, die den Knöpfen ein voluminöses Aussehen verleiht. Knöpfe mit einem konvexen Design haben normalerweise Schatten und Farbverläufe, was ein Gefühl von Schwellung erzeugt. Dieses Design kann elegant und attraktiv aussehen.
3. Interaktives Design
Interaktives Design ist eine Option, die die Tasten für den Benutzer sichtbarer und attraktiver macht. Es beinhaltet die Verwendung von Animationen und Effekten, wenn Sie den Mauszeiger über eine Schaltfläche bewegen oder die Farbe ändern. Ein solches Design kann die Aufmerksamkeit des Benutzers auf sich ziehen und seine Zufriedenheit durch die Verwendung der App erhöhen.
4. Miniatur-Design
Das Miniaturdesign ist eine Option, die für einen begrenzten Platz oder Geräte mit kleinem Bildschirm geeignet ist. Knöpfe mit einem Miniaturdesign sind in der Regel kleiner und können durch Symbole oder Symbole dargestellt werden. Dies hilft, die Oberfläche sauber und einfach zu halten, ohne sie mit großen Elementen zu überladen.
Die Wahl des Designs hängt von den Zielen und Bedürfnissen Ihrer Anwendung ab. Es ist wichtig, Ihre Markenfarben und Ihren Stil zu berücksichtigen, damit die Schaltflächen dem visuellen Erscheinungsbild der App entsprechen. Es wird empfohlen, verschiedene Designoptionen zu testen und Feedback von den Benutzern zu erhalten, um das effizienteste und lesbarste Design auszuwählen.
Festlegen der Anzahl der Schaltflächen
Bevor Sie Schaltflächen am unteren Rand des Bildschirms erstellen, müssen Sie festlegen, wie viele Schaltflächen Sie auf der Seite platzieren möchten. Dies hängt von der Funktionalität ab, die Sie Ihren Benutzern anbieten möchten.
Stellen Sie sich folgende Fragen, um die Anzahl der Schaltflächen zu bestimmen:
- Welche Informationen kann ein Benutzer finden oder abrufen, indem er auf die Schaltfläche klickt? Wenn Sie mehrere verschiedene Kategorien von Informationen oder Funktionen haben, müssen Sie möglicherweise Schaltflächen für jede von ihnen platzieren.
- Welche Aktionen kann ein Benutzer mit einer Schaltfläche ausführen? Wenn Sie bestimmte Aktionen oder Vorgänge haben, die der Benutzer ausführen kann, platzieren Sie Schaltflächen für die entsprechenden Aktionen.
- Welche Auswahlmöglichkeiten stehen dem Benutzer zur Verfügung? Wenn der Benutzer aus mehreren Optionen auswählen oder eine Auswahl treffen möchte, platzieren Sie die Schaltflächen für diese Optionen oder Optionen.
Beachten Sie, dass es wichtig ist, bei der Bestimmung der Anzahl der Schaltflächen ein Gleichgewicht zwischen Funktionalität und Benutzerfreundlichkeit zu finden. Zu viele Schaltflächen können den Benutzer verwirren, und zu wenig bietet möglicherweise nicht genug Funktionalität.
Erstellen eines Containers für Schaltflächen
Um einen Container zu erstellen, in dem die Schaltflächen am unteren Rand des Bildschirms platziert werden, können wir das Element mit den entsprechenden Stilen verwenden.
Beginnen wir mit der Definition eines Containers mit einem Attribut id, die es uns ermöglicht, ein Element auf der Seite eindeutig zu identifizieren:
Jetzt, da wir einen Container haben, können wir Knöpfe darin hinzufügen. Zum Beispiel können wir zwei Schaltflächen mit einem Element hinzufügen :
Wenn Sie diese Seite nun in einem Browser öffnen, sehen Sie am unteren Bildschirmrand einen Container mit zwei Schaltflächen. Der Container selbst hat jedoch immer noch keine sichtbaren Grenzen und Breiten. Wir können dem Container Stile hinzufügen, damit er attraktiver aussieht:
#buttons-container
position: fixed;
background-color: #f1f1f1;
padding: 10px 0;
text-align: center;
button
margin: 0 10px;
padding: 8 x 16 x;
Hintergrundfarbe: #4CAF50;
Grenze: kein;
grenzradius: 4px;
Cursor: Zeiger;
Jetzt hat unser Container eine feste Position am unteren Rand des Bildschirms, nimmt die gesamte Seitenbreite ein und hat eine Hintergrundfarbe, Einrückungen, Textausrichtung und Schaltflächen mit den entsprechenden Stilen.
Positionieren des Containers
Um Schaltflächen am unteren Rand des Bildschirms zu erstellen, müssen Sie den Container, in dem sich die Schaltflächen befinden, korrekt positionieren. Dazu können Sie die CSS-Eigenschaften verwenden position und bottom.
Stellen Sie den Container zuerst auf eine bestimmte Höhe ein, damit die Schaltflächen den gewünschten Platz auf dem Bildschirm einnehmen. Sie können beispielsweise den folgenden CSS-Code verwenden:
In diesem Beispiel hat der Container eine Höhe von 100 Pixeln und wird dank der Eigenschaft am unteren Bildschirmrand befestigt position: fixed;. Eigenschaft bottom: 0; legt den Einzug des Containers vom unteren Bildschirmrand fest.
Danach können Sie Schaltflächen im Container platzieren, z. B. mithilfe eines HTML-Tags :
Als Ergebnis des obigen Codes befinden sich die drei Schaltflächen innerhalb des Containers, der am unteren Rand des Bildschirms angebracht wird.
Jetzt wissen Sie, wie Sie den Container richtig positionieren, um Schaltflächen am unteren Rand des Bildschirms zu erstellen. Bestimmen Sie einfach die Höhe des Containers, legen Sie die Eigenschaften fest position: fixed; und bottom: 0; und dann platziere die Knöpfe in den Behälter.
Tasten-Styling
Sie können verschiedene CSS-Elemente und -Eigenschaften verwenden, um die Schaltflächen am unteren Rand des Bildschirms zu stylen.
Eine einfache Möglichkeit, Schaltflächen Stil hinzuzufügen, besteht darin, Klassen zu verwenden. Sie können Stilklassen in einer CSS-Datei erstellen und diese mithilfe des class-Attributs auf Schaltflächen anwenden.
Beispiel einer CSS-Klasse zum Gestalten einer Schaltfläche:
.buttonBeispiel für eine HTML-Schaltfläche mit Stilanwendung:
In diesem Beispiel hat die Schaltfläche einen grünen Hintergrund (#4CAF50), weißen Text, vertikale und horizontale Einrückung von 15px und 32px, der Cursor ändert sich beim Schweben in einen Zeiger, und die Schaltfläche hat abgerundete Kanten mit einem Radius von 8px.
Zusätzlich zu den Klassen können Sie mit dem style-Attribut auch Inline-Stile direkt auf das Schaltflächenelement anwenden. Die Verwendung von Klassen ist jedoch vorzuziehen, da Sie Stile in einer separaten Datei speichern und auf anderen Schaltflächen wiederverwenden können.
Zuweisen von Funktionen zu Tasten
Jede Schaltfläche am unteren Rand des Bildschirms verfügt über eine eigene einzigartige Funktion, um die Benutzerfreundlichkeit der Webanwendung zu gewährleisten. Hier sind einige Beispiele für Schaltflächenfunktionen:
| Knopf | Funktion |
|---|---|
| Schaltfläche "Speichern" | Speichert Benutzereingaben oder Änderungen an der Anwendung. |
| Abbrechen" | Macht die aktuellen Änderungen oder Vorgänge rückgängig und kehrt den Benutzer zum vorherigen Anwendungsstatus zurück. |
| Schaltfläche "Senden" | Sendet Daten oder Anforderungen zur weiteren Verarbeitung an den Server. |
| Schaltfläche "Löschen" | Löscht das ausgewählte Element oder den ausgewählten Datensatz aus der Anwendung oder Datenbank. |
| Schaltfläche "Erstellen" | Springt zum Erstellen eines neuen Elements oder Datensatzes in der Anwendung. |
Es ist wichtig, den Zweck und die Funktion der einzelnen Schaltflächen zu berücksichtigen, um eine logische und intuitive Benutzererfahrung mit der Webanwendung zu gewährleisten.
