Tetapkan butang html

Pengenalan

Apabila membangunkan aplikasi web, selalunya perlu untuk memaparkan panel tetapan kepada pengguna supaya pengguna boleh menukar tetapan aplikasi mengikut keperluan mereka. Panel tetapan biasanya mengandungi beberapa pilihan, seperti menukar tema, melaraskan kelantangan, dsb. Artikel ini akan menunjukkan kepada anda cara membuat butang tetapan asas menggunakan HTML dan CSS.

Penanda HTML

Mula-mula, kita perlu mencipta butang dalam HTML dan menetapkan gayanya kepada "Set Button". Kita boleh mencipta butang dengan menggunakan elemen "butang" dalam kod HTML.

Tetapan

Gaya CSS

Sekarang kita perlu menambah gaya CSS pada elemen butang supaya ia Penampilan sepadan dengan butang tetapan biasa. Kami boleh menggunakan pemilih kelas CSS untuk menambah gaya pada elemen butang kami.

.butang tetapan {
warna latar belakang: #ffffff;
jidar: tiada;
jejari sempadan: 50%;
bayang kotak: 0 2px 4px rgba( 0, 0, 0, 0.25);
warna: #484848;
kursor: penunjuk;
saiz fon: 24px;
tinggi: 60px;
lebar: 60px;
kedudukan: tetap;
bawah: 20px;
kanan: 20px;
}

Dalam gaya CSS di atas, kami menggunakan sifat dan nilai berikut:

latar belakang - warna: #ffffff; - Menetapkan warna latar belakang butang kepada putih.

sempadan: tiada; - Alih keluar sempadan.

jejari sempadan: 50%; - Menetapkan jejari sempadan butang kepada 50%, menjadikannya bulat.

bayang kotak: 0 2px 4px rgba(0, 0, 0, 0.25); - Menambah bayangan kotak untuk menjadikan butang kelihatan lebih tiga dimensi.

warna: #484848; - Menetapkan warna teks butang kepada kelabu.

kursor: penunjuk; - Menetapkan kursor untuk menghala pada bentuk tangan.

saiz fon: 24px; - Tetapkan saiz fon kepada 24px.

tinggi: 60px; - Tetapkan ketinggian butang kepada 60 piksel.

lebar: 60px; - Tetapkan lebar butang kepada 60px.

kedudukan: tetap; - Tetapkan kedudukan butang kepada "tetap".

bawah: 20px; - Menetapkan tepi bawah butang kepada 20 piksel dari bahagian bawah port pandangan.

kanan: 20px; - Menetapkan tepi kanan butang kepada 20 piksel dari sebelah kanan port pandangan.

Fungsi JavaScript

Kini, kita perlu menambah pengendali acara menggunakan JavaScript untuk memaparkan panel tetapan apabila pengguna mengklik butang. Kita boleh menggunakan kod berikut untuk mencapai keperluan ini.

const settingsButton = document.querySelector(".settings-button");
const settingsPanel = document.querySelector(".settings-panel");

settingsButton.addEventListener(" klik", () => {
settingsPanel.classList.toggle("open");
});

Dalam kod, kami mula-mula mencari butang tetapan kami dalam DOM dan Tetapkan elemen panel. Kemudian kami akan menambah pengendali acara klik untuk butang tetapan. Dalam pengendali acara, kami menggunakan kelas "terbuka" pada panel tetapan supaya ia muncul dalam paparan pengguna. Jika pengguna mengklik butang tetapan sekali lagi, kami akan menggunakan kelas "tutup" untuk menyembunyikan panel tetapan.

Kesimpulan

Menggunakan HTML, CSS dan JavaScript, kami mencipta butang tetapan ringkas yang memberikan pengguna cara untuk menukar tetapan aplikasi. Butang ini boleh diubah saiz dan diwarnakan dengan CSS tersuai agar sesuai dengan mana-mana aplikasi atau tapak web. Dengan butang sedemikian, pengguna boleh menukar tetapan aplikasi dengan mudah untuk memenuhi keperluan dan pilihan mereka.

Atas ialah kandungan terperinci Tetapkan butang html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!