CSS-Optimierung, Textfeld und Schaltflächencode

Ein Beispiel für Textfelder und Schaltflächen zur CSS-Formularverschönerung

1. Schauen wir uns zunächst die wahren Farben von Schaltflächen und Textfeldern an, die häufig auf Webseiten erscheinen!

Wie können wir basierend auf dem Bild oben das Erscheinungsbild des Textfelds und der Schaltfläche ändern? Im Folgenden stelle ich Ihnen zwei Textfeld- und Schaltflächenstile als Beispiele zur Verfügung. Das erste ist, dass das Textfeld und die Schaltfläche keinen dreidimensionalen Effekt haben, sondern nur Linienfarbe und Füllfarbe haben. Sie haben diesen Effekt möglicherweise auf vielen Websites gesehen Es gibt den Leuten jedoch ein besonderes Gefühl, was sehr gut ist. Der zweite Effekt ist, dass das Textfeld wie eine Unterstreichung aussieht. Gleichzeitig ist die Hintergrundfarbe der Schaltfläche nicht mehr vorhanden Grau, aber es ist farbig. Man kann sagen, dass dies ein sehr cooler Effekt ist. Lassen Sie mich über die detaillierten Schritte sprechen, um diese beiden Effekte zu erzielen.

2. Textfelder und Schaltflächen ohne dreidimensionale Effekte

Anschließend nehmen wir zur Veranschaulichung den Bearbeitungsvorgang der Webseite in DW3. Wir haben die Webseite bereits bearbeitet, z. B. ein Textfeld und eine Schaltfläche. Zu diesem Zeitpunkt drücken wir die Taste [F10], um das Bearbeitungsfenster für den Webseiten-Quellcode anzuzeigen Bearbeiten Sie den und

< ;style type="text/css">

input .smallInput{border:1 solid black;FONT-SIZE: normal; FONT-WEIGHT: normal; 18px; LINE-HEIGHT: normal🎜>

Okay, der erste Schritt ist abgeschlossen. Als nächstes fügen wir diesen Code zur HTM-Anweisung des Textfelds und der Schaltfläche hinzu bzw.:

class=smallInput

Zum Beispiel in &

Dieses Textfeld Dieser Code wurde zur HTM-Anweisung der Schaltfläche hinzugefügt. Der endgültige Effekt ist wie folgt:

Wie wäre es damit, im Vergleich zur Standardschaltfläche im vorherigen Bild ist es viel mehr schön? Es ist eigentlich nicht allzu schwer umzusetzen.

3. Farblich unterstrichene Textfeld- und Schaltflächeneffekte

Ebenso benötigen wir die Hilfe eines Stylesheets, um diesen Effekt zu erzielen, der dem ersten Effekt ähnelt . Die Schritte sind die gleichen und fügen das Stylesheet zwischen den Tags ein:

.jb51. net]