Html+css, um reinen Text und Schaltflächen mit Symbolen zu erreichen

Html+css, um reinen Text und Schaltflächen mit Symbolen zu erreichen

Dieser Artikel fasst die Implementierungsmethoden einiger grundlegender Seitenelemente zusammen, die später aktualisiert werden. Zunächst einmal ist das häufigste, was uns begegnet, der Button-Ausschnitt. Buttons können viele verschiedene Erscheinungsformen haben, aber man kann sie im Allgemeinen in reine Textbuttons und Buttons mit Symbolen unterteilen. Lassen Sie uns über die Implementierungsmethoden dieser beiden Button-Typen sprechen. Das Wirkungsdiagramm sieht wie folgt aus:

Der Code lautet wie folgt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. </ vor > < vor   Name = "Code"   Klasse = "html" > <!DOCTYPE html >      
  2. < html   lang = "zh-CN" >      
  3. <Kopf>​​      
  4.    <Titel> Schaltfläche Schreiben </Titel>​​​      
  5.    < Meta   Zeichensatz = "UTF-8" >      
  6.    < Meta   http-equiv = "X-UA-kompatibel"   Inhalt = "IE=Edge,Chrome=1" >      
  7.    < Link   rel = "Stilvorlage"   href = "css/style.css" >      
  8. < Stil   Typ = "Text/CSS" >      
  9. a:hover{Textdekoration: keine;}
  10. .btn{
  11. Anzeige: Inline-Block;
  12. Rand oben: 10px;
  13. Polsterung: 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. Rand: keiner;
  24. }
  25. .bubtn{
  26. Rand: keiner;
  27. }
  28. .btn{
  29. Schriftstil: normal;
  30. }
  31. .bgbtn span{
  32. Rand links: 10px;
  33. Polsterung links: 20px;
  34. Hintergrund: URL (Bilder/Bearbeiten.png) links Mitte, keine Wiederholung;
  35. }
  36. .bgbtn02 img{
  37. Rand unten: -3px;
  38. Rand rechts: 10px;
  39. }
  40. </ Stil >      
  41. </ Kopf >      
  42. < Textkörper >      
  43. <!--<a>Tag-Schaltfläche-->      
  44. <   href = ""   Klasse = "btn" > aLabel-Schaltfläche </ a >      
  45. <!--<input>-Tag-Schaltfläche-->      
  46. < Eingabe   Klasse = "inbtn btn"   Typ = "Schaltfläche"   Wert = "Beschriftungsschaltfläche eingeben" />      
  47. <!--<button> Tag-Schaltfläche-->      
  48. < Schaltfläche   Klasse = "bubtn btn" > Schaltflächen-Tag-Schaltfläche </ Schaltfläche >      
  49. <!--Beliebige Beschriftungsschaltfläche-->      
  50. < ich   Klasse = "ibtn btn" > i Beschriftungsschaltfläche </ i >      
  51. <!--Schaltfläche mit Hintergrundsymbol-->      
  52. <   href = ""   Klasse = "bgbtn btn" >      
  53.    < span > Schaltfläche mit Symbol </ span >      
  54. </ a >      
  55. <   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 Etiketten angeht, müssen Sie diese noch ausprobieren. Wenn Sie interessante Schaltflächen zum Schreiben haben, lassen Sie uns diese gemeinsam realisieren.

<<:  Einführung in den Befehl „Linux-Typversion-Speicherfestplattenabfrage“

>>:  Zusammenfassung der Erfahrungen mit der Verwendung des Div-Box-Modells

Artikel empfehlen

Lösen Sie das Problem, dass Docker Sudo-Operationen verwenden muss

Die Schritte sind wie folgt 1. Erstellen Sie eine...

Centos7.5 installiert die Bereitstellung des binären Pakets mysql5.7.24

1. Umweltvorbereitung: Betriebssystem: CentOS Lin...

Detaillierte Zusammenfassung des JavaScript-Arrays

Inhaltsverzeichnis 1. Array-Induktion 1. Teilen S...

MySQL 5.7.12 Installations- und Konfigurations-Tutorial unter Mac OS 10.11

So installieren und konfigurieren Sie MySQL auf M...

Lichtschalter mit js steuern

Verwenden Sie js, um den Lichtschalter zu Ihrer R...

MySQL-Lernprogramm Clustered Index

Das Clustering ist eigentlich relativ zur InnoDB-...

Implementierungscode der HTML-Floating-Promptbox-Funktion

Allgemeine Formulareingabeaufforderungen belegen ...

Über das WeChat Mini-Programm zur Implementierung von Cloud-Zahlungen

Inhaltsverzeichnis 1. Einleitung 2. Gedankenanaly...

Detaillierte Erklärung zum Problem der CSS-Klassennamen

Die folgenden CSS-Klassennamen, die mit einer Zah...

Detaillierte Erklärung der Verwendung von DECIMAL im MySQL-Datentyp

Detaillierte Erklärung der Verwendung von DECIMAL...

Teilen Sie eine Idee zum Aufbau eines Master-Slave-Systems für eine große MySQL-Datenbank

Diese Woche war so arbeitsreich wie ein Krieg. Ic...

Vue implementiert grafischen Überprüfungscode

In diesem Artikelbeispiel wird der spezifische Co...

Details zur Überwachung von DOM-Elementen durch MutationObServer in JavaScript

1. Grundlegende Verwendung Es kann über den Mutat...

So führen Sie Hadoop aus und erstellen Images in Docker

Wir erfinden das Rad neu: Hier verwenden wir Neuv...

Lösung für den Fehler von MySQL, innobackupex zum Sichern des Verbindungsservers zu verwenden

Was soll ich tun, wenn MySQL keine Verbindung zum...