Zone de texte d'optimisation CSS et code du bouton

Un exemple de zones de texte et de boutons pour l'embellissement des formulaires CSS

1. Tout d'abord, examinons les vraies couleurs des boutons et des zones de texte qui apparaissent souvent sur les pages Web !

Sur la base de l'image ci-dessus, comment pouvons-nous modifier l'apparence de la zone de texte et du bouton ? Ci-dessous, je vais vous fournir deux styles de zone de texte et de bouton à titre d'exemple. Le premier est que la zone de texte et le bouton n'ont pas d'effet tridimensionnel, mais ont uniquement une couleur de ligne et une couleur de remplissage. Vous avez peut-être vu cet effet sur de nombreux sites Web. Cependant, cela donne aux gens un sentiment spécial, ce qui est très bien. Le deuxième effet est plus spécial. Il fait ressembler la zone de texte à un soulignement et est colorée en même temps. gris, mais il est coloré. On peut dire que c'est un effet très cool. D'accord, laissez-moi parler des étapes détaillées pour obtenir ces deux effets.

2. Zones de texte et boutons sans effets tridimensionnels

Ensuite, nous prendrons l'opération d'édition de la page Web dans DW3 comme exemple pour illustrer. nous avons déjà édité la page Web, l'objet de formulaire correspondant y est inséré, par exemple en insérant une zone de texte et un bouton. À ce moment, nous appuyons sur la touche [F10] pour afficher la fenêtre d'édition du code source de la page Web. modifiez le et  :

< ;style type="text/css">
input .smallInput{border:1 solid black;FONT-SIZE : 9pt; FONT-VARIANT : normal FONT-WEIGHT : normal ; 18px; LINE-HEIGHT : normal🎜>

 D'accord, la première étape est terminée. Ensuite, nous ajouterons ce code à l'instruction htm de la zone de texte et du bouton. respectivement :
class=smallInput
Par exemple, dans &

Cette zone de texte Ce code a été ajouté à l'instruction html du bouton. L'effet final est le suivant :

Et si, par rapport au bouton standard de la photo précédente, est-il beaucoup plus beau See More ? Ce n’est en fait pas trop difficile à mettre en œuvre.


3. Effets de zone de texte et de bouton soulignés colorés
De même, nous avons également besoin de l'aide d'une feuille de style pour obtenir cet effet, qui est similaire au premier effet. . Les étapes sont les mêmes et insérez la feuille de style entre les balises et de la page Web :

.

.jb51.net]