suchen

Heim  >  Artikel  >  Web-Frontend  >  HTML-CSS implementiert einfachen Text und Schaltflächen mit Icons_HTML/Xhtml_Webseitenproduktion

HTML-CSS implementiert einfachen Text und Schaltflächen mit Icons_HTML/Xhtml_Webseitenproduktion

WBOY
WBOYOriginal
2016-05-16 16:36:032655Durchsuche

Dieser Artikel fasst die Implementierungsmethoden einiger grundlegender Seitenelemente zusammen und wird in Zukunft aktualisiert. Das häufigste Problem, auf das wir stoßen, ist der Ausschnitt von Schaltflächen. Schaltflächen können viele Erscheinungsbilder haben, können jedoch im Allgemeinen in Schaltflächen mit einfachem Text und Schaltflächen mit Symbolen unterteilt werden. Das Rendering ist wie folgt:

Der Code lautet wie folgt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. pre><pre Name="Code" Klasse="html" >>     
  2. <html lang="zh- CN">     
  3. <Kopf>     
  4.   <Titel>按钮写法Titel>     
  5.   <meta charset="UTF- 8">     
  6.   <meta http-equiv=" X-UA-kompatibel" Inhalt="IE=Edge,chrome=1">     
  7.   <link rel="stylesheet"  href="css/style.css">     
  8. <Stil Typ="text/ css">     
  9.   a:hover{text-decoration: none;}     
  10.   .btn{     
  11.     display: inline-block;     
  12.     margin-top: 10px;     
  13.     Padding: 10px 24px;     
  14.     Rahmenradius: 4px;     
  15.     Hintergrundfarbe: #63b7ff;     
  16.     Farbe: #fff;     
  17.     Cursor: Zeiger;     
  18.   }     
  19.   .btn:hover{     
  20.     Hintergrundfarbe: #99c6ff;     
  21.   }     
  22.   .inbtn{     
  23.     Rahmen: keine;     
  24.   }     
  25.   .bubtn{     
  26.     Rahmen: keine;     
  27.   }     
  28.   .btn{     
  29.     Schriftstil: normal;     
  30.   }     
  31.   .bgbtn span{     
  32.     Rand links: 10px;     
  33.     padding-left: 20px;     
  34.     Hintergrund: url(images/edit.png) links Mitte keine Wiederholung;     
  35.   }     
  36.   .bgbtn02 img{     
  37.     margin-bottom: -3px;     
  38.     Rand rechts: 10px;     
  39.   }     
  40. Stil> 
  41. Kopf> 
  42. <Körper> 
  43.  
  44. <a href="" Klasse="btn">eine Beschriftungsschaltflächea> 
  45.  
  46. <Eingabe Klasse="inbtn btn " Typ="Schaltfläche" Wert= "Eingabebezeichnungsschaltfläche"/> 
  47.  
  48. <Schaltfläche Klasse="bubtn btn ">SchaltflächenbeschriftungsschaltflächeSchaltfläche> 
  49.  
  50. <i Klasse="ibtn btn ">I-Tag-Schaltflächei> 
  51.  
  52. <a href="" Klasse="bgbtn btn">
  53. <span>Schaltfläche mit Symbol Spanne> 
  54. a> 
  55. <a href="" Klasse="bgbtn02 btn">
  56. <img src="images/ edit.png"/>Schaltfläche mit Symbol
  57. a> 
  58. Körper> 
  59. html> 
Was die Vor- und Nachteile verschiedener Tags betrifft, muss jeder sie verstehen. Wenn Sie interessante Schaltflächen schreiben möchten, werden wir diese gemeinsam implementieren.
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So richten Sie eine horizontale Navigationsstruktur bei der Erstellung von Html_HTML/Xhtml_Webseiten einNächster Artikel：So richten Sie eine horizontale Navigationsstruktur bei der Erstellung von Html_HTML/Xhtml_Webseiten ein

In Verbindung stehende Artikel

Mehr sehen