Heim > Artikel > Web-Frontend > HTML- und CSS-Code zur Implementierung von Klartext und Schaltflächen mit Symbolen

HTML- und CSS-Code zur Implementierung von Klartext und Schaltflächen mit Symbolen

不言Original: 2018-06-09 16:01:582504Durchsuche

In diesem Artikel wird hauptsächlich die Implementierung von Nur-Text- und Symbolschaltflächen mit HTML und CSS vorgestellt. In diesem Artikel werden zwei Arten von Schaltflächen vorgestellt: reiner Text und Symbole.

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, sie können jedoch im Allgemeinen in Schaltflächen mit reinem Text und Schaltflächen mit Symbolen unterteilt werden. Das Rendering ist wie folgt:

Der Code lautet wie folgt:

XML/HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>按钮写法</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <link rel="stylesheet" href="css/style.css">
<style type="text/css">
  a:hover{text-decoration: none;}     
  .btn{     
    display: inline-block;     
    margin-top: 10px;     
    padding: 10px 24px;     
    border-radius: 4px;     
    background-color: #63b7ff;     
    color: #fff;     
    cursor: pointer;     
  }     
  .btn:hover{     
    background-color: #99c6ff;     
  }     
  .inbtn{     
    border: none;     
  }     
  .bubtn{     
    border: none;     
  }     
  .btn{     
    font-style: normal;     
  }     
  .bgbtn span{     
    margin-left: 10px;     
    padding-left: 20px;     
    background: url(images/edit.png) left center no-repeat;     
  }     
  .bgbtn02 img{     
    margin-bottom: -3px;     
    margin-right: 10px;     
  }     
</style>
</head>
<body>
<!--<a>标签按钮-->
<a href="" class="btn">a标签按钮</a>
<!--<input>标签按钮-->
<input class="inbtn btn" type="button" value="input标签按钮"/>
<!--<button>标签按钮-->
<button class="bubtn btn">button标签按钮</button>
<!--任意标签按钮-->
<i class="ibtn btn">i标签按钮</i>
<!--带背景图标按钮-->
<a href="" class="bgbtn btn">
  <span>带图标按钮</span>
</a>
<a href="" class="bgbtn02 btn">
  <img src="images/edit.png"/>带图标按钮     
</a>
</body>
</html>

As zur Optimierung verschiedener Tags Die Mängel müssen noch von allen erfahren werden. Wenn Sie interessante Schaltflächen zum Schreiben haben, werden wir diese gemeinsam implementieren.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Wie man HTML5 verwendet, um die Funktion des Teilens für WeChat-Freunde, QQ-Freunde, QQ-Space-Weibo-QR-Code zu realisieren

Tipps zum Festlegen von HTML-Tabellenrändern

Das obige ist der detaillierte Inhalt vonHTML- und CSS-Code zur Implementierung von Klartext und Schaltflächen mit Symbolen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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 erstellen Sie mit dem linearen CSS3-Verlauf einen RahmenNächster Artikel：So erstellen Sie mit dem linearen CSS3-Verlauf einen Rahmen

In Verbindung stehende Artikel

Mehr sehen