Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Ein Beispiel für eine Schaltfläche, die mithilfe von CSS mit einem Bild implementiert wurde

墨辰丷
Freigeben: 2018-05-09 18:23:04
Original
1955 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung von CSS zum Implementieren eines Schaltflächenbeispiels vorgestellt. Es ist einfach zu verwenden und zu teilen. Das Lesen des Bildkoordinatensystems über CSS ist ein Referenz für interessierte Freunde einmal.

Der NetEase 126-Anmeldeschaltflächencode lautet wie folgt:

<style> 
.inp_L1,.inp_L2,{background:url(/upload/20080515201218970.jpg) no-repeat} 
.inp_L1{ width:67px; height:23px; background-position:-4px -4px; border:0; color:#464646; line-height:23px} 
.inp_L2{ width:67px; height:23px; background-position:-4px -30px; border:0; color:#464646; line-height:23px} 
</style> 
<input type="submit" value="登 录" class="inp_L1" onMouseOver="this.className=&#39;inp_L2&#39;" onMouseOut="this.className=&#39;inp_L1&#39;" id="input_btn1"  name="enter.x" tabindex="4">
Nach dem Login kopieren

Der Navigationsschaltflächencode lautet wie folgt:

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>用CSS实现的一张图完成的导航条</title> 
<style> 
ul,li{ list-style:none; float:left;} 
body{ font-size:12px; line-height:1.6; font-family:Verdana, "宋体", Arial; text-align:center;} 
#info li{ margin-left:4px; margin-top:15px;} 
#info a {display:block;text-align:center; padding-left:15px; 
padding-top:2px;padding-bottom:1px;background-image:  
url(/upload/20080515201218783.GIF); 
background-repeat: no-repeat;color: #000; width:47px; cursor:hand; text-decoration: none;} 
#job a:link,#job a:visited{background-position: -62px 0px;} 
#eve a:link,#eve a:visited{background-position: -124px 0px;} 
#oth a:link,#oth a:visited{background-position: -186px 0px;} 
#car a:hover ,#car a:active {background-position: 0px -22px; color:#fff;} 
#job a:hover ,#car a:active {background-position: -62px -22px; color:#fff;} 
#eve a:hover ,#car a:active {background-position: -124px -22px; color:#fff;} 
#oth a:hover ,#car a:active {background-position: -186px -22px; color:#fff;} 
</style> 
</head> 
<body>  
<div id="info"> 
 <ul> 
  <li id="car"><a href="#" target="_blank"><span> 
 游 戏</span></a></li> 
  <li id="job"><a href="#" target="_blank"><span> 
 娱 乐</span></a></li> 
  <li id="eve"><a href="#" target="_blank"><span> 
 菜 单</span></a></li> 
  <li id="oth"><a href="#" target="_blank"><span> 
 好 玩</span></a></li>    
 </ul>  
</div> 
</body> 
</html>
Nach dem Login kopieren


Verwandte Empfehlungen:

CSS zur Erzielung eines 3D-Tasteneffekts

AngularJS hat eine WebApp entwickelt, um den Jump-Button-Effekt hervorzuheben und zu erfahren, wie ui-sref und ui-sref-active verwendet werden

Empfohlene Artikel zu CSS3, um den 3D-Button-Effekt zu erzielen

CSS3 Zeigt den Effektcode der horizontal scrollenden Menütaste an

Das obige ist der detaillierte Inhalt vonEin Beispiel für eine Schaltfläche, die mithilfe von CSS mit einem Bild implementiert wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage