butang tutup html

Butang tutup dalam HTML digunakan untuk menutup tetingkap atau pop timbul dalam halaman web atau aplikasi. Butang tutup biasanya ikon atau teks, dan pengguna boleh menutup tetingkap semasa atau kotak pop timbul dengan mengklik butang. Artikel ini akan memperkenalkan butang tutup dalam HTML dan cara melaksanakan pelbagai jenis butang tutup.

1. Penggunaan asas butang tutup

Dalam HTML, butang tutup paling asas ialah elemen butang Pelaksanaan khusus adalah seperti berikut:

<button onclick="window.close()">关闭</button>

Pelaksanaan ini butang tutup Kaedah ini sangat mudah Apabila pengguna mengklik butang, fungsi JavaScript window.close() akan dipanggil untuk menutup tetingkap semasa.

2. Gaya ikon butang tutup

Selain butang teks, kami juga boleh menggunakan gambar atau ikon untuk melaksanakan butang tutup untuk menambah kesan visual. Ikon penutup yang biasa digunakan termasuk X, ×, dsb., yang boleh dilaksanakan menggunakan ikon fon atau imej tersuai. Berikut ialah dua kaedah pelaksanaan:

1 Gunakan ikon fon

Ikon fon boleh menentukan warna, saiz dan gaya lain melalui CSS, yang lebih fleksibel dan mudah. Selain itu, ikon fon boleh disesuaikan dengan skrin dengan resolusi berbeza, menjadikannya lebih jelas dan lancar. Berikut ialah contoh butang tutup menggunakan ikon fon Font Awesome:

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<button onclick="window.close()">
  <i class="fas fa-times"></i>
</button>

Di sini kami menggunakan elemen link untuk mengimport fail CSS Font Awesome, dan kemudian meletakkan elemen i dalam butang dan tetapkan class Atributnya ialah fas fa-times, yang bermaksud menggunakan ikon times. Apabila pengguna mengklik butang tutup, laksanakan JavaScript window.close().

2. Gunakan gambar tersuai

Untuk menggunakan gambar tersuai untuk melaksanakan butang tutup, anda perlu menyediakan gambar terlebih dahulu pada halaman web tidak akan terlalu masa-. memakan. Contoh berikut menggunakan ikon tutup dalam format PNG:

<button onclick="window.close()">
  <img src="close.png" alt="关闭">
</button>

Di sini kita menyarangkan elemen img dalam butang dan menggunakan atribut src untuk menentukan URL imej itu perihalan imej Pengguna Apabila butang diklik, laksanakan JavaScript alt. window.close()

3. Gaya reka bentuk butang tutup

Butang dengan penampilan yang baik selalunya boleh meningkatkan pengalaman pengguna Sekarang mari kita gayakan butang tutup.

1. Butang Wireframe

Butang Wireframe selalunya digunakan dalam reka bentuk gaya ringan atau rata.

Berikut ialah pelaksanaan butang tutup menggunakan gaya rangka wayar:

<button class="close-button" onclick="window.close()">关闭</button>

Kami menambah nama kelas yang dipanggil

untuk menggayakan butang. Berikut ialah kod CSS yang sepadan: close-button

.close-button {
  border: 1px solid #999;
  color: #999;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  background-color: transparent;
  transition: all .3s ease-in-out;
}

.close-button:hover {
  background-color: #999;
  color: #fff;
}

Kod di atas melaksanakan gaya butang berikut:

Ikon butang

Dalam selain menggunakan penerangan Teks, butang juga boleh menyatakan fungsi melalui ikon. Di bawah ini kami akan menggabungkan ikon fon dan gambar tersuai yang diperkenalkan sebelum ini untuk melaksanakan butang tutup dengan ikon.

<button class="close-icon-button" onclick="window.close()">
  <i class="fas fa-times"></i>
</button>

Perhatikan bahawa kami telah menambah nama kelas baharu

di sini, dan juga menetapkan nama kelas close-icon-button elemen terbenam butang i, menunjukkan penggunaan ikon fas fa-times. times

Berikut ialah kod gaya yang sepadan:

.close-icon-button {
  border: none;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.close-icon-button:hover {
  transform: rotate(45deg);
}

.close-icon-button i {
  color: #999;
  font-size: 14px;
  transition: all .3s ease-in-out;
}

.close-icon-button:hover i {
  color: #fff;
}

Kod di atas melaksanakan gaya butang berikut:

4. Jenis yang berbeza senario aplikasi Terdapat banyak jenis butang tutup

, dan memilih jenis butang tutup yang berbeza hendaklah berdasarkan keperluan aplikasi sebenar. Bahagian ini akan memperkenalkan butang tutup di bawah beberapa keperluan biasa.

1. Butang tutup pada kotak modal

Kotak modal ialah tetingkap timbul yang digunakan secara meluas dalam halaman web. Pada masa yang sama, kotak modal memerlukan butang tutup untuk menutup tetingkap timbul.

Secara amnya, butang tutup kotak modal hendaklah diletakkan di sudut kanan atas kotak modal Pelaksanaan khusus adalah seperti berikut:

<div class="modal">
  <button class="close-icon-button" onclick="closeModal()">
    <i class="fas fa-times"></i>
  </button>
  <!-- 模态框内容 -->
</div>

Perhatikan di sini bahawa kami menambah butang bernama.

Fungsi JavaScript untuk menutup kotak modal. closeModal()

Berikut ialah kod gaya yang sepadan:

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

.modal button {
  position: absolute;
  top: 10px;
  right: 10px;
}

Kod di atas mencapai kesan kotak modal berikut:

2 butang tutup

Dalam senario dengan berbilang tab, apabila pengguna perlu menutup tab semasa, mereka boleh menggunakan butang tutup pada tab.

Berikut ialah contoh butang tutup menggunakan gaya imej tersuai:

<div class="tab">
  <button class="close-tab-button" onclick="closeTab()">
    <img src="close.png" alt="">
  </button>
  <a href="#">标签页标题</a>
</div>

Kod CSS yang sepadan adalah seperti berikut:

.tab {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px 4px 0 0;
  background-color: #f7f7f7;
  position: relative;
}

.close-tab-button {
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 5px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.close-tab-button img {
  width: 16px;
  height: 16px;
}

Kod di atas mencapai tab berikut kesan halaman:

Kesimpulan

Artikel ini memperkenalkan penggunaan asas butang tutup dalam HTML, gaya ikon dan reka bentuk gaya, serta pelaksanaan butang tutup dalam senario aplikasi yang berbeza. Saya harap ia dapat membantu anda mereka bentuk halaman web atau aplikasi dengan lebih baik.

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