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

Standards zum Schreiben von Codekommentaren bei der Webseitenerstellung

<br />Ich habe die in meiner Arbeit verwende...

So überwachen Sie Array-Änderungen in Vue

Inhaltsverzeichnis Vorwort Quellcode Wo beginne i...

Informationen zu UDP in Linux

Inhaltsverzeichnis 1. Einführung in UDP und Linux...

Node+Socket realisiert einfache Chatroom-Funktion

In diesem Artikel wird der spezifische Code von N...

Implementierung von React-Loop-Daten (Liste)

Lassen Sie uns zunächst die Daten simulieren, die...

So erhalten Sie den Inhalt einer TXT-Datei über FileReader in JS

Inhaltsverzeichnis JS erhält den Inhalt der TXT-D...

VMware Workstation-Installation unter Linux

Vom Einsteiger bis zum Neueinsteiger ist das Linu...

HTML ist etwas, das Webseiten-Ersteller lernen und beherrschen müssen.

Welche Vorteile bietet das Erlernen von HTML? 1: ...

Detaillierte Erklärung der Desktop-Anwendung mit Vue3 und Electron

Inhaltsverzeichnis Vue CLI erstellt ein Vue-Proje...

Beispielcode für die Verwendung von CSS zur Implementierung des Logistikfortschrittsstils

Wirkung: CSS-Stil: <style type="text/css&...

Implementierungscode zum Speichern von Bildern in der MySQL-Datenbank und deren Anzeige auf der Front-End-Seite

Inhaltsverzeichnis 1. Erstellen Sie zunächst mit ...

So installieren Sie Jupyter in Docker auf CentOS und öffnen Ports

Inhaltsverzeichnis Installieren Sie Jupyter Docke...

In einem Artikel erfahren Sie, wie Sie Vue-Frontend-Paging und Backend-Paging implementieren.

Inhaltsverzeichnis 1: Handschriftliche Seitennumm...

SQL-Implementierung von LeetCode (183. Kunden, die noch nie eine Bestellung aufgegeben haben)

[LeetCode] 183.Kunden, die nie bestellen Angenomm...

Wie verstecke ich den Text im A-Tag und zeige das Bild an? Kompatibel mit 360-Grad-Rendering

Oftmals werden Sie auf einen <a>-Tag-Stil st...