HTML CSS implémente du texte brut et des boutons avec la production de pages Icons_HTML/Xhtml

HTML CSS implémente du texte brut et des boutons avec la production de pages Icons_HTML/Xhtml_Web

WBOY

Libérer： 2016-05-16 16:36:03

original

2653 Les gens l'ont consulté

Cet article résume les méthodes d'implémentation de certains éléments de base de la page et sera mis à jour à l'avenir. Tout d’abord, la chose la plus courante que nous rencontrons est la découpe des boutons. Les boutons peuvent avoir de nombreuses apparences, mais ils peuvent généralement être divisés en boutons en texte brut et en boutons avec icônes. Parlons des méthodes d’implémentation de ces deux boutons. Le rendu est le suivant :

Le code est le suivant :

Code XML/HTMLCopier le contenu dans le presse-papiers

pré><pré nom="code" classe="html" >>
<html lang="zh- CN">
<tête>
<titre>按钮写法titre>
<meta charset="UTF- 8">
<méta http-equiv=" Compatible X-UA" content="IE=Edge,chrome=1">
<lien rel="feuille de style" href="css/style.css">
<style type="texte/ css">
a:hover{text-decoration: none;}
.btn{
affichage : bloc en ligne ;
marge supérieure : 10 px ;
remplissage : 10px 24px ;
border-rayon : 4px ;
couleur de fond : #63b7ff;
couleur : #fff;
curseur : pointeur ;
}
.btn:hover{
couleur de fond : #99c6ff;
}
.inbtn{
frontière : aucune ;
}
.bubtn{
frontière : aucune ;
}
.btn{
style de police : normal ;
}
.bgbtn span{
marge gauche : 10 px ;
padding-gauche : 20 px ;
arrière-plan : url(images/edit.png) centre gauche sans répétition ;
}
.bgbtn02 img{
marge inférieure : -3px ;
marge droite : 10 px ;
}
style>
tête>
<corps>
<a href="" classe="btn">un bouton d'étiquettea>
<entrée class="inbtn btn " type="bouton" valeur= "bouton d'étiquette de saisie"/>
<bouton classe="bubtn btn ">bouton étiquette boutonbouton>
<i class="ibtn btn ">je touche le boutoni>
<a href="" classe="bgbtn btn">
<span>Bouton avec icône durée>
a>
<a href="" classe="bgbtn02 btn">
<img src="images/ edit.png"/>Bouton avec icône
a>
corps>
html>

Quant aux avantages et inconvénients des différentes balises, encore faut-il que tout le monde les comprenne. Si vous avez des boutons intéressants à écrire, nous les implémenterons ensemble.