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

Vorgehensweise, wenn die Online-MySQL-Auto-Increment-ID erschöpft ist

Inhaltsverzeichnis Tabellendefinition - automatis...

Detaillierte Erklärung der Verwendung und des Unterschieds zwischen relativ und absolut in HTML

Der Unterschied zwischen relativ und absolut in H...

Detaillierte Erklärung zur Verwendung von Docker zum Erstellen einer Entwicklungsumgebung für Laravel- und Vue-Projekte

Dieser Artikel stellt die Entwicklungsumgebung vo...

Einige Methoden zur Optimierung der Abfragegeschwindigkeit bei der Verarbeitung großer Datenmengen durch MySQL

Bei den tatsächlichen Projekten, an denen ich tei...

Lösen Sie das Problem der Docker-Protokollmontage

Der Schlüssel ist, dass der lokale Server keine S...

Responsives CSS-Webseitenlayout zur automatischen Anpassung an PC-/Pad-/Telefongeräte

Vorwort Heutzutage gibt es viele Geräte, darunter...

Detaillierte Erläuterung des Prozesses zur Realisierung der Rechnerfunktion in Javascript

Inhaltsverzeichnis 1. Einführung in Rechnerfunkti...

Detaillierte Erklärung des VueRouter-Routings

Inhaltsverzeichnis Vue-Router 1. Verstehen Sie da...

Detaillierte Erklärung zum ordnungsgemäßen Löschen einer großen Tabelle in MySQL

Vorwort Um eine Tabelle zu löschen, kann der Befe...

Native JS realisiert den besonderen Effekt der Verbreitung von Liebe durch Mausbewegungen

In diesem Artikel wird ein JS-Spezialeffekt vorge...

Gängige Methoden der Vue-Komponentenbildung: Übertragung und Kommunikation von Komponentenwerten

Verwandte Wissenspunkte Übergeben von Werten von ...

Einfache Analyse von EffectList in React

Inhaltsverzeichnis EffectList-Sammlung Effektlist...

Detaillierte Schritte zur Installation von Nginx auf dem Apple M1-Chip und zum Bereitstellen eines Vue-Projekts

brew install nginx Apple Mac verwendet zur Instal...

Beispiel-Tutorial zur Verwendung der Summenfunktion in MySQL

Einführung Heute werde ich die Verwendung der Sum...

Detaillierte Erklärung zur Verwendung von MySQL DML-Anweisungen

Vorwort: Im vorherigen Artikel haben wir hauptsäc...