Tutorial grafik tentang mereka bentuk butang menggunakan teknologi pintu gelangsar_Pertukaran pengalaman

Artikel ini ialah artikel terjemahan, alamat teks penuh: http://diger.cn/article.asp?id=351
Alamat asal: http://www. filamentgroup.com /lab/buttonElement/

Particle Tree baru-baru ini menerbitkan artikel yang menerangkan teknik yang mereka hasilkan untuk mereka bentuk elemen butang Bagi anda yang tidak mahir, butang meja sudah tiada adalah sukar untuk disesuaikan. Penyelesaian biasa adalah menggunakan butang lalai yang disediakan oleh penyemak imbas, atau menggunakan input grafik. Apabila input grafik melengkapkan hasil yang diingini, ia meminta penciptaan grafik baharu untuk setiap butang dengan teksnya "Baked-in" (tiada menyebut menukarnya dengan tuding).

Walaupun teknologi Particle Tree menyediakan penyelesaian yang boleh dipercayai, ia tidak dapat memenuhi keperluan kami. Kami memerlukan butang yang menggunakan teknologi pintu gelangsar, teks HTML sebenar yang tidak memerlukan JavaScript untuk menatal atau menyerahkan borang. Memenuhi syarat ini bermakna input dan elemen penambat dikecualikan. Jelas sekali, elemen butang adalah satu-satunya pilihan kami. Teknik berikut menunjukkan teknik butang pelayar silang menggunakan teknologi pintu gelangsar.


Lihat Demo 🎜>
CSS:
Kod program adalah seperti berikut:

CSS Untuk IE6 dan IE7 (kadangkala diperlukan)

<button value="submit" class="submitBtn"><span>Submit</span></button>

Kodnya adalah seperti berikut:

Seperti yang anda lihat, 2 imej digunakan untuk setiap negeri (4 imej kesemuanya). Memudahkan lagi, negeri ini boleh diubah menjadi dua. Tetapi ujian awal idea itu menghasilkan keputusan yang tidak konsisten. Sokongan Penyemak Imbas:

IE6, IE7, Firefox (mac/pc), Safari, Opera, Camino, dsb.

button {   
  border:0;   
  cursor:pointer;   
  font-weight:bold;   
  padding:0 20px 0 0;   
  text-align:center;   
}  
button span {   
  position:relative;   
  display:block;   
  white-space:nowrap;   
  padding:0 0 0 20px;   
}  
/*blue buttons*/  
button.submitBtn {   
  background:url(images/btn_blue_right.gif) right no-repeat;   
  font-size:1.3em;   
}  
button.submitBtn span {   
  height:50px;   
  line-height:50px;  
  background:url(images/btn_blue_left.gif) left no-repeat;  
  color:#fff;   
}  
button.submitBtn:hover {  
    background:url(images/btn_blue_right_hover.gif) right no-repeat;   
}  
button.submitBtn:hover span {  
    background:url(images/btn_blue_left_hover.gif) left no-repeat;   
}

Amaran: Agar tuding berfungsi dalam IE6, anda perlu menulis pencetus kelas. Tidak seteruk bertukar gambar sekalipun.
Di atas ialah tutorial grafik tentang mereka bentuk butang menggunakan teknologi pintu gelangsar_kandungan pertukaran pengalaman Untuk kandungan yang lebih berkaitan, sila perhatikan laman web PHP Cina (www.php.cn)!

button {   
  width:auto;   
  overflow:visible;   
}  
button span {   
  margin-top:1px;   
}