HTML-CSS implementiert einfachen Text und Schaltflächen mit Icons_HTML/Xhtml

HTML-CSS implementiert einfachen Text und Schaltflächen mit Icons_HTML/Xhtml_Webseitenproduktion

WBOY

Freigeben： 2016-05-16 16:36:03

Original

2678 Leute haben es durchsucht

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

Der Code lautet wie folgt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

pre><pre Name="Code" Klasse="html" >>
<html lang="zh- CN">
<Kopf>
<Titel>按钮写法Titel>
<meta charset="UTF- 8">
<meta http-equiv=" X-UA-kompatibel" Inhalt="IE=Edge,chrome=1">
<link rel="stylesheet" href="css/style.css">
<Stil Typ="text/ css">
a:hover{text-decoration: none;}
.btn{
display: inline-block;
margin-top: 10px;
Padding: 10px 24px;
Rahmenradius: 4px;
Hintergrundfarbe: #63b7ff;
Farbe: #fff;
Cursor: Zeiger;
}
.btn:hover{
Hintergrundfarbe: #99c6ff;
}
.inbtn{
Rahmen: keine;
}
.bubtn{
Rahmen: keine;
}
.btn{
Schriftstil: normal;
}
.bgbtn span{
Rand links: 10px;
padding-left: 20px;
Hintergrund: url(images/edit.png) links Mitte keine Wiederholung;
}
.bgbtn02 img{
margin-bottom: -3px;
Rand rechts: 10px;
}
Stil>
Kopf>
<Körper>
<a href="" Klasse="btn">eine Beschriftungsschaltflächea>
<Eingabe Klasse="inbtn btn " Typ="Schaltfläche" Wert= "Eingabebezeichnungsschaltfläche"/>
<Schaltfläche Klasse="bubtn btn ">SchaltflächenbeschriftungsschaltflächeSchaltfläche>
<i Klasse="ibtn btn ">I-Tag-Schaltflächei>
<a href="" Klasse="bgbtn btn">
<span>Schaltfläche mit Symbol Spanne>
a>
<a href="" Klasse="bgbtn02 btn">
<img src="images/ edit.png"/>Schaltfläche mit Symbol
a>
Körper>
html>

Was die Vor- und Nachteile verschiedener Tags betrifft, muss jeder sie verstehen. Wenn Sie interessante Schaltflächen schreiben möchten, werden wir diese gemeinsam implementieren.