Maison > Article > interface Web > Comment définir le style de la balise du bouton HTML ? Introduction au style de balise de bouton HTML
Comment définir le style de la balise du bouton HTML ? Introduction au style de balise de bouton HTML
- 寻∝梦original
- 2018-09-03 17:12:3922149parcourir
Cet article présente principalement le paramètre de style des balises de bouton HTML, ainsi que le style d'embellissement des balises de bouton HTML. Ensuite, lisons cet article ensemble
Commençons par présenter les paramètres de style. des balises de bouton en HTML :
Paramètres des boutons ordinaires :
Définissez l'attribut type de l'élément d'entrée sur "bouton". Des boutons normaux peuvent être créés. Le texte affiché sur le bouton est la valeur de l'attribut value. Si aucun attribut value n'est fourni, un bouton vide est simplement créé. Par exemple :
<input type="button" value="立即购买">
L'effet est évident, il s'agit du paramètre normal par défaut du bouton.
Par défaut, il n'y a pas de réponse lorsque l'on clique sur un bouton normal. Par conséquent, vous devez enregistrer les événements pour les boutons ordinaires et écrire manuellement les fonctions de gestionnaire correspondantes. Si vous souhaitez que le formulaire soit soumis lorsque vous cliquez sur le bouton ci-dessus, vous devez enregistrer l'événement onClick pour le bouton. Par exemple :
<form name="buy" action="form.html" method="post">
<button onClick="submitForm(buy)">立即购买</button>
</form>Cliquez maintenant sur le bouton, l'événement onClick sera déclenché et la fonction de traitement d'événement submitForm(buy) sera appelée. Le paramètre buy est la valeur de l'attribut name du formulaire. à traiter. Si vous souhaitez soumettre le formulaire après avoir cliqué sur le bouton, vous pouvez appeler la méthode submit() de l'objet formulaire dans la fonction du gestionnaire d'événements :
function submitForm(f) {
f.submit();
}Il s'agit d'un paramètre de situation par défaut. Voyons maintenant définir le style de la balise du bouton HTML :
Montrons un exemple de code complet :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.div {
display: inline-block;
padding: .3em .5em;
background-image: linear-gradient(#ddd, #bbb);
border: 1px solid rgba(0,0,0,.2);
border-radius: .3em;
box-shadow: 0 1px white inset;
text-align: center;
text-shadow: 0 1px 1px black;
color:white;
font-weight: bold;
}
.div:active{
box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
border-color: rgba(0,0,0,.3);
background: #bbb;
}
</style>
</head>
<body>
<div class="div">Button</div>
</body>
</html>L'effet de ceci est le suivant :
L'effet de ceci n'est-il pas très évident ? Il semble bien meilleur que celui par défaut. Lorsque nous apprenons js, nous pouvons toujours l'utiliser. La technologie js rend ce bouton par défaut plus beau.
D'accord, ce qui précède concerne les paramètres de style de la balise du bouton html, ainsi qu'un résumé du style d'embellissement (si vous voulez en savoir plus, rendez-vous sur le site Web PHP chinois si vous en avez). questions, vous pouvez poser ci-dessous.
[Recommandation de la rédaction]
Comment faire un menu déroulant html ? Introduction à l'exemple de code du menu déroulant html
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!