html butang tutup

Butang Tutup HTML: Cara Menambah Butang Tutup yang Elegan pada Halaman Web

Dalam reka bentuk web, butang tutup ialah elemen biasa yang boleh memberikan kemudahan kepada pelawat dan membantu mereka menamatkan penyemakan imbas dengan mudah halaman atau aplikasi kemudian. Dalam artikel ini, kami akan membincangkan cara membuat butang tutup yang elegan menggunakan HTML dan CSS, dan cara mengaitkannya dengan acara tutup halaman web melalui JavaScript.

Langkah Pertama: Cipta Elemen HTML

Langkah pertama dalam mencipta butang tutup HTML ialah mencipta elemen HTML. Kami akan menggunakan elemen butang dan menambah gaya tersuai untuk menjadikannya kelihatan seperti butang tutup. Sebagai contoh, kita boleh menggunakan kod HTML asas:

<button class="close-btn">关闭</button>

Ini akan mencipta butang mudah dengan "Tutup" ialah teks pada butang.

Langkah 2: Tambah gaya CSS

Seterusnya, kami akan menambah gaya CSS tersuai untuk mencantikkan butang. Kita boleh menggunakan sifat kotak-bayang CSS untuk memberikan kesan tiga dimensi, dan sifat jejari sempadan untuk mencipta sudut bulat. Kita boleh menggunakan kod CSS berikut:

.close-btn {
  background-color: #444;
  border: none;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
}

Ini akan mencipta butang tutup dengan 3 sudut bulat piksel dan kesan bayang-bayang.

Langkah Tiga: Tambah Acara JavaScript

Akhir sekali, kita perlu mengaitkan butang tutup dengan acara tutup halaman. Kami boleh menggunakan JavaScript untuk melaksanakan tugas ini. Apabila pengguna mengklik butang tutup, kita boleh menggunakan fungsi window.close() untuk menutup tetingkap atau tab yang sedang dibuka. Contohnya:

document.querySelector('.close-btn').addEventListener('click', function() {
  window.close();
});

Cuma tambahkan kod ini pada fail JavaScript halaman web. Kini, apabila pengguna mengklik butang tutup, halaman web akan ditutup secara automatik.

Ringkasan

Dalam artikel ini, kami mencipta butang tutup yang elegan menggunakan HTML, CSS dan JavaScript. Butang ini berfungsi pada pelbagai halaman web dan aplikasi yang berbeza untuk membantu pelawat keluar dari halaman dengan mudah. Apabila reka bentuk web berkembang, butang tutup akan menjadi lebih biasa dan pereka bentuk boleh menggunakan gaya dan teknik yang berbeza untuk mencipta butang tutup hebat mereka sendiri.

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