cari

Rumah  >  Artikel  >  hujung hadapan web  >  kotak teks css dan kod kesan pengindahan butang_Pertukaran pengalaman

kotak teks css dan kod kesan pengindahan butang_Pertukaran pengalaman

WBOY
WBOYasal
2016-05-16 12:04:582535semak imbas
1. Mari kita lihat warna sebenar butang dan kotak teks yang sering muncul di halaman web!

kotak teks css dan kod kesan pengindahan butang_Pertukaran pengalaman
Berdasarkan gambar di atas, bagaimanakah kita boleh menukar rupa kotak teks dan butang? Di bawah saya akan memberikan anda dua gaya kotak teks dan butang sebagai contoh Yang pertama ialah kotak teks dan butang tidak mempunyai kesan tiga dimensi, tetapi hanya mempunyai warna garisan dan warna isian Anda mungkin pernah melihat kesan ini pada banyak tapak web . Walau bagaimanapun, ia memberi orang perasaan istimewa, yang sangat baik Kesan kedua adalah lebih istimewa Ia menjadikan kotak teks kelihatan seperti garis bawah dan pada masa yang sama, warna latar belakang butang itu kelabu, tetapi ia berwarna Ia boleh dikatakan bahawa ini adalah kesan yang sangat sejuk.

2 Kotak teks dan butang tanpa kesan tiga dimensi

Kemudian kami akan mengambil operasi penyuntingan halaman web dalam DW3 sebagai contoh untuk menggambarkan. kami telah menyunting halaman web. Objek borang yang sepadan dimasukkan ke dalamnya, seperti memasukkan kotak teks dan butang Pada masa ini, kami menekan kekunci [F10] untuk memaparkan tetingkap penyuntingan kod sumber halaman web edit dan

Okey, langkah pertama telah selesai, kami akan menambah htm kotak teks dan butang Tambah kod ini pada pernyataan:
class=smallInput
Contohnya, dalam dan

Kod ini ditambahkan pada pernyataan htm kotak teks dan butang ini. Kesan akhir adalah seperti yang ditunjukkan di bawah:


kotak teks css dan kod kesan pengindahan butang_Pertukaran pengalaman
Bagaimana pula jika dibandingkan dengan butang standard dalam gambar sebelum ini, ia sebenarnya tidak terlalu sukar untuk dilaksanakan.


3. Kotak teks bergaris bawah berwarna dan kesan butang
Begitu juga, kami juga memerlukan bantuan helaian gaya untuk mencapai kesan ini, yang serupa dengan kesan pertama . Langkahnya adalah sama dan masukkan helaian gaya antara teg dan


.jb51.net]



Seperti yang anda lihat dari helaian gaya di atas, kesan ini dicapai melalui dua gaya, satu untuk kotak teks dan satu untuk butang, jadi dua kod berbeza perlu dimasukkan ke dalam pernyataan htm kotak teks dan butang Dalam kotak teks, kod class=smallInput.
Contohnya, ,
Masukkan kod class="buttonface" ke dalam pernyataan butang, seperti contoh

Sebenarnya, ini sepadan dengan gaya kotak teks dan butang dalam helaian gaya Kesan akhir adalah seperti yang ditunjukkan di bawah:




Lihat kesan di atas adakah ia masih mengingatkan anda tentang kotak teks dan butang yang membosankan? Kedua-dua kesan di atas dicapai melalui helaian gaya, dan kaedah penggunaannya juga sangat mudah. kotak teks css dan kod kesan pengindahan butang_Pertukaran pengalaman

Penghasilan borang adalah fokus pembangunan web Melalui borang, interaksi dan komunikasi boleh dicapai, dan pengumpulan dan perkongsian maklumat juga boleh dicapai dari perspektif semantik dan struktur Perbincangan, anda juga boleh mengambil bahagian dalam perbincangan dan pembelajaran!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：14 Perkara yang Perlu Diperhatikan tentang Meningkatkan Kecekapan Halaman Web Pertukaran Grafik_PengalamanArtikel seterusnya：14 Perkara yang Perlu Diperhatikan tentang Meningkatkan Kecekapan Halaman Web Pertukaran Grafik_Pengalaman

Artikel berkaitan

Lihat lagi