kotak teks css dan kod kesan pengindahan butang_Pertukaran pengalaman

1. Mari kita lihat warna sebenar butang dan kotak teks yang sering muncul di halaman web!

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:

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.

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!