So implementieren Sie Klartext und Schaltflächen mit Symbolen in HTML+CSS-HTML-Tutorial-php.cn

So implementieren Sie Klartext und Schaltflächen mit Symbolen in HTML+CSS

php中世界最好的语言

Freigeben： 2018-01-24 09:56:50

Original

2949 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie reinen Text und Schaltflächen mit Symbolen mithilfe von HTML+CSS implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung von reinem Text und Schaltflächen mit Symbolen mithilfe von HTML+CSS? Werfen wir einen Blick darauf.

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 haben möglicherweise viele Erscheinungsformen, sie können jedoch im Allgemeinen in Schaltflächen mit reinem Text und Schaltflächen mit Symbolen unterteilt werden.

<!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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Wie man HTML und CSS verwendet, um klaren Text zu erstellen

Was sind die am häufigsten verwendeten Tags? XHTML

So verwenden Sie horizontale Linienanmerkungen und Codekommentare in HTML

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Klartext und Schaltflächen mit Symbolen in HTML+CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!