CSS-Textfeld und Schaltflächenverschönerungseffektcode_Erfahrungsaustausch

1. Werfen wir zunächst einen Blick auf die wahren Farben von Schaltflächen und Textfeldern, 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 der Webseite. Fügen Sie dieses Stylesheet zwischen den head>-Tags ein

Wie Sie dem Stylesheet oben entnehmen können, ist dieser Effekt die Implementierung Dies wird durch zwei Stile erreicht, einen für das Textfeld und einen für die Schaltfläche. Daher müssen zwei verschiedene Codes in die HTM-Anweisungen des Textfelds und der Schaltfläche eingefügt werden.
Zum Beispiel ,
Fügen Sie class="buttonface"-Code in die Button-Anweisung ein, wie zum Beispiel das Beispiel

Tatsächlich entspricht dies dem Stil des Textfelds und der Schaltfläche im Stylesheet. Der endgültige Effekt ist wie gezeigt unten: