Heim > Artikel > Web-Frontend > Ein Beispiel für eine Schaltfläche, die mithilfe von CSS mit einem Bild implementiert wurde

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

墨辰丷Original: 2018-05-09 18:23:041900Durchsuche

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

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>

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!

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 verschönern Sie Schaltflächen mit CSS, ohne Bilder zu verwendenNächster Artikel：So verschönern Sie Schaltflächen mit CSS, ohne Bilder zu verwenden

In Verbindung stehende Artikel

Mehr sehen