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

Lernen Sie schnell die MySQL-Grundlagen

Inhaltsverzeichnis SQL verstehen SELECT verstehen...

Implementierungsschritte zum Installieren einer Java-Umgebung in Docker

Dieser Artikel basiert auf Linux CentOS8, um Dock...

Vue implementiert eine Scroll-Ladetabelle

Inhaltsverzeichnis Ergebnisse erzielen Wissensres...

So konfigurieren Sie Linux CentOS für die regelmäßige Ausführung von Skripten

Oft möchten wir, dass der Server regelmäßig ein S...

Erkunden Sie die Eigenschaften und Ausdrücke verschiedener Räume in HTML (empfohlen)

I. Überblick Beim Schreiben von HTML-Vorlagen wer...

Tutorial zum Erstellen eines CA-Zertifikats unter Linux Centos8

Installieren der erforderlichen Dateien Yum insta...

Methoden für JavaScript-String-Objekte

Inhaltsverzeichnis Methoden des String-Objekts Me...

So ändern Sie das Passwort in MySQL 5.7.18

So ändern Sie das Passwort in MySQL 5.7.18: 1. Fa...

Detaillierte Erklärung des MySQL-Prepare-Prinzips

Vorteile von Prepare Der Grund, warum Prepare SQL...

Ausführliche Erklärung der Sonderberechtigungen SUID, SGID und SBIT in Linux

Vorwort Für die Berechtigungen von Dateien oder V...

Empfehlen Sie mehrere MySQL-bezogene Tools

Vorwort: Mit der kontinuierlichen Entwicklung der...

Erste Schritte mit GDB unter Linux

Vorwort gdb ist ein sehr nützliches Debugging-Too...

Zugriffsvorgang im MySQL-Befehlszeilenmodus MySQL-Datenbankvorgang

Nutzungsumgebung Geben Sie im cmd-Modus mysql --v...

Beispiele für die Verwendung von Docker und Docker-Compose

Docker ist eine Open-Source-Container-Engine, mit...

So installieren Sie Docker unter Windows 10 Home Edition

Ich habe Docker kürzlich verwendet, um ein Projek...