zone de texte CSS et effet d'embellissement des boutons code_Experience Exchange

1. Jetons d’abord un coup d’œil aux vraies couleurs des boutons et des zones de texte qui apparaissent souvent sur les pages Web !

D'après 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 les balises et de la page Web. Insérez cette feuille de style entre les balises head>

 D'accord, la première étape est terminée. Ensuite, nous ajouterons le htm de la zone de texte et du bouton. respectivement. Ajoutez ce code à la déclaration :
class=smallInput
Par exemple, dans " name= "Submit" value="Flat Button" class=smallInput>
Ce code est ajouté à l'instruction htm de cette zone de texte et de ce bouton. L'effet final est le suivant :

Qu'en est-il ? Par rapport au bouton standard de la photo précédente, il est beaucoup plus beau. Ce n'est en fait pas trop difficile à mettre en œuvre.

3. Effets de zone de texte soulignée colorée et de bouton
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 une feuille de style entre les balises et


.jb51.net]

Comme vous pouvez le voir dans la feuille de style ci-dessus, cet effet est la mise en œuvre. est obtenu grâce à deux styles, un pour la zone de texte et un pour le bouton, donc deux codes différents doivent être insérés dans les instructions htm de la zone de texte et du bouton. Dans la zone de texte, class=smallInput est inséré.
Par exemple, ,
Insérez le code class="buttonface" dans l'instruction du bouton, comme dans l'exemple

En fait, cela correspond au style de la zone de texte et du bouton dans la feuille de style. L'effet final est tel qu'illustré. ci-dessous :





Jetez un œil à l'effet ci-dessus. Cela vous rappelle-t-il toujours les zones de texte et les boutons monotones ? Les deux effets ci-dessus sont obtenus grâce à des feuilles de style, et la méthode d'utilisation est également très simple.

La production de formulaires est au centre du développement Web. Grâce aux formulaires, l'interaction et la communication peuvent être réalisées, ainsi que la collecte et le partage d'informations. Les deux articles ci-dessus sont réalisés du point de vue. de sémantique et de structure, vous pouvez également participer à la discussion et à l'apprentissage !