kawalan css tersembunyi

CSS (Cascading Style Sheet) ialah bahasa penanda yang digunakan untuk reka letak halaman web Ia boleh mengawal gaya dan reka letak pelbagai elemen dalam halaman web. Dalam reka bentuk web, kita selalunya perlu menyembunyikan beberapa kawalan, seperti bar navigasi, bar skrol, dsb. Seterusnya, mari kita belajar cara menggunakan CSS untuk menyembunyikan kawalan.

Gunakan atribut paparan

Dalam CSS, atribut paparan boleh digunakan untuk menyembunyikan elemen, cuma tetapkan nilainya kepada tiada. Contohnya, jika kita perlu menyembunyikan kawalan butang, kita hanya perlu menambah kod berikut dalam helaian gaya CSS:

button {
  display: none;
}

Kod di atas akan menyembunyikan semua elemen butang. Jika anda hanya mahu menyembunyikan kawalan butang tertentu, anda boleh menambah id atau atribut kelas padanya dan menggunakan pemilih yang sepadan dalam CSS.

Gunakan atribut keterlihatan

Selain atribut paparan, terdapat satu lagi atribut dalam CSS yang boleh menyembunyikan kawalan, iaitu keterlihatan. Tidak seperti paparan, atribut keterlihatan menyembunyikan elemen semasa masih menduduki kedudukannya pada halaman. Contoh kod adalah seperti berikut:

button {
  visibility: hidden;
}

Apabila kami menetapkan keterlihatan kepada tersembunyi, elemen itu akan tetap wujud pada halaman, tetapi akan menjadi tidak kelihatan. Jika kami ingin menjadikan elemen kelihatan semula melalui acara seperti mengklik butang, kami boleh mengawal perubahan atribut keterlihatan dalam JavaScript.

Gunakan atribut kelegapan

Atribut kelegapan boleh digunakan untuk mengawal kelegapan elemen, dengan itu menyembunyikan kawalan. Jika kita menetapkan ketelusan sesuatu kawalan kepada 0, kawalan itu akan menjadi telus sepenuhnya dan tidak dapat dilihat. Contoh kod adalah seperti berikut:

button {
  opacity: 0;
}

Perhatikan bahawa apabila kawalan disembunyikan melalui atribut kelegapan, kawalan masih menduduki kedudukannya pada halaman.

Menggunakan atribut kedudukan

Dalam reka bentuk web, kami biasanya menggunakan atribut kedudukan untuk mengawal kedudukan elemen. Selain digunakan untuk elemen susun atur, dalam beberapa kes, atribut kedudukan juga boleh digunakan untuk menyembunyikan kawalan. Terdapat banyak kaedah pelaksanaan khusus. Berikut ialah kaedah menyembunyikan kawalan berdasarkan atribut kedudukan:

button {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Dalam kod di atas, kedudukan kawalan butang ditetapkan jauh supaya ia tidak akan dipaparkan pada halaman. Apabila anda perlu memaparkan kawalan, anda hanya perlu melaraskan koordinat kedudukan kawalan.

Kesimpulan

Dalam reka bentuk web, kawalan menyembunyikan adalah teknik yang sangat biasa. Tanpa mengira pendekatan, adalah penting untuk mempertimbangkan pengalaman pengguna dan kebolehcapaian halaman dan tidak menyembunyikan maklumat atau fungsi penting terlalu mendalam. Apabila mereka bentuk penyelesaian, ia juga perlu menggunakan penyelesaian yang berbeza untuk menyembunyikan kawalan mengikut keperluan dan situasi yang berbeza.

Atas ialah kandungan terperinci kawalan css tersembunyi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!