recherche

Maison >interface Web >tutoriel HTML >HTML CSS implémente du texte brut et des boutons avec la production de pages Icons_HTML/Xhtml_Web

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

WBOY
WBOYoriginal
2016-05-16 16:36:032675parcourir

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
  1. pré><pré nom="code" classe="html" >>     
  2. <html lang="zh- CN">     
  3. <tête>     
  4.   <titre>按钮写法titre>     
  5.   <meta charset="UTF- 8">     
  6.   <méta http-equiv=" Compatible X-UA" content="IE=Edge,chrome=1">     
  7.   <lien rel="feuille de style"  href="css/style.css">     
  8. <style type="texte/ css">     
  9.   a:hover{text-decoration: none;}     
  10.   .btn{     
  11.     affichage : bloc en ligne ;     
  12.     marge supérieure : 10 px ;     
  13.     remplissage : 10px 24px ;     
  14.     border-rayon : 4px ;     
  15.     couleur de fond : #63b7ff;     
  16.     couleur : #fff;     
  17.     curseur : pointeur ;     
  18.   }     
  19.   .btn:hover{     
  20.     couleur de fond : #99c6ff;     
  21.   }     
  22.   .inbtn{     
  23.     frontière : aucune ;     
  24.   }     
  25.   .bubtn{     
  26.     frontière : aucune ;     
  27.   }     
  28.   .btn{     
  29.     style de police : normal ;     
  30.   }     
  31.   .bgbtn span{     
  32.     marge gauche : 10 px ;     
  33.     padding-gauche : 20 px ;     
  34.     arrière-plan : url(images/edit.png) centre gauche sans répétition ;     
  35.   }     
  36.   .bgbtn02 img{     
  37.     marge inférieure : -3px ;     
  38.     marge droite : 10 px ;     
  39.   }     
  40. style> 
  41. tête> 
  42. <corps> 
  43.  
  44. <a href="" classe="btn">un bouton d'étiquettea> 
  45.  
  46. <entrée class="inbtn btn " type="bouton" valeur= "bouton d'étiquette de saisie"/> 
  47.  
  48. <bouton classe="bubtn btn ">bouton étiquette boutonbouton> 
  49.  
  50. <i class="ibtn btn ">je touche le boutoni> 
  51.  
  52. <a href="" classe="bgbtn btn">
  53. <span>Bouton avec icône durée> 
  54. a> 
  55. <a href="" classe="bgbtn02 btn">
  56. <img src="images/ edit.png"/>Bouton avec icône
  57. a> 
  58. corps> 
  59. 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.
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment configurer une structure de navigation horizontale dans la production de pages Html_HTML/Xhtml_WebArticle suivant：Comment configurer une structure de navigation horizontale dans la production de pages Html_HTML/Xhtml_Web

Articles Liés

Voir plus