Maison > Article > interface Web > Comment distinguer si une entrée est un bouton ou une zone de texte à l'aide de l'échange CSS styles_Experience
Comment distinguer si une entrée est un bouton ou une zone de texte à l'aide de l'échange CSS styles_Experience
- PHP中文网original
- 2016-05-16 12:04:551828parcourir
Penyiasatan teknikal tentang cara membezakan sama ada input ialah butang atau kotak teks semasa menetapkan gaya - keluarkan kandungan dalam input
Apabila anda melihat tag html , anda akan Apa terlintas di fikiran? Kotak teks? Butang? Butang radio? Kotak semak? ... Ya, ya, ya, mereka baik-baik saja. Mungkin anda mungkin tidak menyangka bahawa input kecil ini sebenarnya boleh mencipta 10 perkara yang berbeza Berikut ialah senarai untuk melihat mana yang anda tidak fikirkan:
kotak kata laluan
input type="radio" /> Radio button
kotak semak
="file" /> Kawalan pemilihan fail
Hidden box
input adalah benar-benar satu perkara yang hebat, dan ia sangat "provokatif", tetapi apabila anda benar-benar cuba untuk menetapkan gaya yang berbeza untuk kawalan yang berbeza dalam projek, anda akan mendapati bahawa input benar-benar boleh "Meletupkan kepala anda". Saya tidak tahu mengapa input diberikan begitu banyak identiti pada mulanya, tetapi "identiti N-lipat"nya memang membawa banyak masalah kepada pereka laman web. Nasib baik, orang yang bekerja adalah hebat, dan masih ada cara untuk menyelesaikan masalah itu~, walaupun mereka semua mempunyai kekurangan mereka sendiri Orz... Kaedah pembebasan diringkaskan secara kasar, dan senarainya adalah seperti berikut (Saya tidak begitu berbakat , jadi kesilapan dan ketinggalan tidak dapat dielakkan, jadi saya ingin bertanya kepada semua pakar Bimbingan):
1 Gunakan ungkapan css untuk menentukan ungkapan
2 Gunakan pemilih jenis dalam css
3 . Gunakan skrip javascript untuk melaksanakan
4 Jika anda menggunakan Microsoft Visual Studio Untuk projek pembangunan pada tahun 2005 atau versi seterusnya, tahniah, anda juga boleh menggunakan skin.
Berikut akan menerangkan pelaksanaan terperinci setiap kaedah serta kelebihan dan kekurangannya.
1: Gunakan ungkapan css untuk menilai ungkapan
Rujukan kod pelaksanaan:
doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<tête>
<titre> diffInput2 titre>
<méta nom="Auteur" content="JustinYoung"/>
<méta nom="Mots clés" contenu="" />
<méta nom="Description" contenu=""/>
<méta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" >
entrée
{
couleur de fond : expression(this.type=="text"?'#FFC':'');
}
style>
tête >
<corps>
<dl>
<dt>Ini ialah kotak teks biasa:<dd><masukan taip="teks" nama="">
<dt> < 🎜>dd><input taip="button" nilai ="i'm button">
dl>
badan>
html>
Kelemahan: Ungkapan penghakiman FireFox tidak menyokong. Perkara yang membawa maut ialah hanya satu yang boleh dibezakan (contohnya, dalam contoh, hanya kotak teks teks boleh dibezakan), jangan cuba untuk menetapkan berbilang, yang berikut akan menimpa Orz di atas...
2: Gunakan pemilih Jenis dalam css
kod rujukan pelaksanaan:
doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<tête>
<titre> diffInput2 titre>
<méta nom="Auteur" content="JustinYoung"/>
<méta nom="Mots clés" contenu="" />
<méta nom="Description" contenu=""/>
<méta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="texte /css">
input[type="text"]
{
couleur de fond :#FFC;
}
input[type="password"]
{
image d'arrière-plan :url(BG.gif);
}
input[type="submit"]
{
warna latar belakang:biru;
warna :putih;
}
masukan [type="reset"]
{
warna latar belakang:tentera laut;
warna:putih;
}
input[type="radio"]
{
/* Dalam FF, Beberapa gaya radio seperti warna latar belum disokong*/
margin:10px;
}
input[type="checkbox"]
{
/*Dalam FF, Beberapa gaya kotak pilihan seperti warna latar belum disokong*/
margin:10px;
}
input[type="button"]
{
warna latar belakang:biru muda;
}
gaya> ;
kepala>
< badan>
<dl>
<dt>Ini kotak teks biasa:<dd><input taip="text" nama="">
<dt>Ini kotak teks kata laluan: <dd><masukan taip="kata laluan" nama="">
<dt >Ini butang serahkan :<dd><input taip="submit">
<dt >Ini butang semula :<dd><masukan taip="reset">
<dt >Ini ialah radio:<dd><input taip="radio" nama="ground1"> <input taip="radio" nama="ground1" >
<dt>Ini kotak pilihan: <dd><masukan taip="kotak semak" nama ="ground2"> <input taip 🎜>="kotak semak" nama="ground2">
<dt>C'est un bouton normal :<dd><saisie type="bouton" valeur="i' bouton m">
dl>
corps>
html>
Avantages : simple, clair et peut être divisé en différents formulaires de contrôle de saisie.
Inconvénients : sélecteur de type, les navigateurs avant IE6 qui ne supportent pas très bien les standards du web ne peuvent pas le supporter (Orz fatal...)
3 : Utiliser le script javascript pour implémenter
Code de référence d'implémentation :
Code html front-end :
doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<tête>
<titre> diffInput titre>
<méta nom="Auteur" content="JustinYoung">
<méta nom="Mots clés" contenu="">
<méta nom="Description" contenu="">
<méta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<style type="text/css">
entrée{comportement :url('css.htc ');}
style>
tête>
<corps>
<dl>
<dt>Ceci est une zone de texte normale :<dd><entrée type="text" nom="">
<dt>Voici la zone de texte du mot de passe : <jj><saisie type="mot de passe" nom="">
<dt >Voici le bouton de soumettre :<jj><entrée type="submit">
<dt >Ceci est le bouton de réinitialisation :<dd><entrée type="reset">
<dt >Voici la radio :<jj><entrée type="radio" nom="ground1"> <entrée type="radio" nom="ground1" >
<dt>Voici la case à cocher : <dd><input type="checkbox" nom ="ground2"> <entrée type="checkbox" nom="ground2">
<dt>C'est un bouton normal :<dd><entrée type="bouton" valeur="i' m bouton">
dl>
corps>
html>
Css.htc代码：
<script langue=javascript>
switch(type)
{
case 'text':
style.backgroundColor= "rouge";
pause;
cas 'mot de passe' :
style.backgroundImage="url(BG.gif) ";
pause;
cas 'submit' :
style.backgroundColor="bleu";
style. couleur="blanc";
pause;
case 'reset':
style.backgroundColor="marine";
style.color="blanc ";
pause;
cas 'radio' :
style.backgroundColor="rose vif";
pause;
case 'checkbox':
style.backgroundColor= "vert";
pause;
case 'bouton':
style.backgroundColor="bleu clair";
pause;
par défaut:; //d'autres utilisent le style par défaut.
}
script>
Avantages : Vous pouvez partitionner chaque formulaire de contrôle de saisie. L'utilisation mixte de plusieurs technologies satisfait la vanité du « je suis un maître ».
Inconvénients : La technologie implique beaucoup d'enseignement, car elle utilise js pour le post-traitement, donc avant que le js ne prenne effet, chaque entrée est toujours dans son état d'origine, puis tout d'un coup "devient belle", ce qui rendra votre page très étrange. Le plus fatal est que FireFox ne prend pas en charge Orz...
4 : Utiliser le skin dans Microsoft Visual Studio 2005.
Code de référence du fichier skin :
<%--Style pour TextBox commune--%>
<asp:TextBox runat="serveur" style ="couleur de fond :#FFC ">asp:TextBox >
<asp : Bouton exécuté="serveur" style=" fond-couleur : rouge">asp:Bouton>
Perhatikan bahawa gaya di dalam ditambah menggunakan gaya dan bukannya cssClass Sebabnya sangat mudah Jika anda menggunakan cssClass, cssClass sebelumnya akan menulis ganti cssClass ini. mengakibatkan kegagalan. Sudah tentu, kulit tidak boleh digunakan secara bersendirian dan mesti digunakan bersama dengan helaian gaya css.
Kelebihan: Anda boleh membahagikan setiap borang kawalan (nota: kulit hanya boleh digunakan untuk kawalan sebelah pelayan, jadi ia bukan lagi teg input mudah, walaupun kawalan sebelah pelayan ini masih apabila "dipukul" di meja depan) kawalan input). Selain css, ia dipisahkan oleh lapisan lain, menjadikan tetapan gaya lebih disesuaikan. Kelebihan lain (rujuk kelebihan kulit).
Kelemahan: Hanya boleh digunakan dengan kawalan sebelah pelayan. Tidak semua projek boleh menggunakan fungsi kulit Orz...
Ringkasan: Kaedah di atas semuanya mempunyai kelebihan dan kekurangan masing-masing , menggunakan salah satu sahaja tidak dapat menyelesaikan masalah dengan baik. Oleh itu, pelbagai kaedah harus digunakan bersama untuk menyelesaikan masalah dengan lebih baik. Tetapi adakah pelbagai kaedah sempurna jika digunakan bersama? TIDAK~! Ia juga mempunyai kelemahan yang membawa maut - penyelenggaraan berbilang penyelesaian memerlukan kos yang lebih besar!
Posskrip: Ini adalah era yang bermasalah, diterajui oleh IE6, apabila pelayar bukan standard web menyapu dunia saya tidak tahu berapa ramai pemula halaman web mati secara tragis dalam IE6 analisis Pelik Di bawah model ini, berapa ramai pengaturcara yang diperhambakan oleh IE6, dan banyak pereka web yang tinggal di bawah kelangkang IE6. Walaupun dalam kegelapan, kami gembira melihat kemunculan orang FireFox yang berani yang menentang kezaliman, dan permulaan sokongan IE7 yang semakin baik untuk standard Web. Tetapi malam itu masih akan berlangsung lama. Kami gembira dan sedih tentang era apabila standard web menguasai dunia. Berita baiknya ialah pada masa itu, reka bentuk dan perancangan web kami akan menjadi semudah makan. Namun, demi kemajuan masyarakat manusia, teknologi untuk menyelamatkan bumi, dan budaya teknologi membangunkan alam semesta -_-b... Saya masih menantikan kedatangan standard web yang akan menguasai dunia.
kata kunci: Secara automatik membezakan antara pelbagai gaya input Cara membezakan antara