Lele - Bahagian 1

Artikel ini menerangkan cara membuat spanduk iklan "ikan keli" yang tetap kelihatan di bahagian bawah laman web walaupun menatal. Teknik ini menggunakan gabungan CSS dan JavaScript, dengan pengendalian khas untuk Internet Explorer.

Konsep Utama:

Banner bawah yang berterusan:
• Fungsi teras adalah elemen div yang diposisikan di bahagian bawah halaman menggunakan CSS (). position: fixed
Keserasian silang penyemak imbas:
• Pendekatan CSS-Only awal, menggunakan , tidak berfungsi dalam versi lama Internet Explorer. Penyelesaian ini melibatkan komen bersyarat dan manipulasi DOM untuk menambah div pembungkus () untuk IE sahaja. Pembungkus ini menggunakan position: fixed untuk spanduk dan div#zip untuk menguruskan menatal dalam pembungkus. position: absolute overflow: auto
Pengendalian khusus IE:
• Fungsi JavaScript tersuai () secara dinamik menyuntik div pembungkus ke dalam IE dom, memastikan keserasian tanpa memberi kesan kepada penyemak imbas lain. wrapFish Komen bersyarat:
Komen-komen ini membolehkan CSS khusus penyemak imbas dan kemasukan JavaScript. Ini memastikan bahawa IE hanya menerima markup tambahan yang diperlukan untuk pembetulan.
• markup yang cekap:
Div tambahan dan gaya yang berkaitan hanya ditambah untuk Internet Explorer, mengelakkan kembung yang tidak perlu untuk pelayar lain.

Coretan kod:

Coretan kod berikut menggambarkan CSS dan JavaScript yang digunakan. Perhatikan bahawa ini adalah versi mudah untuk demonstrasi.

:

catfish.css

:

#catfish {
  position: fixed;
  bottom: 0;
  background: transparent url(images/catfish-tile.gif) repeat-x left bottom;
  padding: 0;
  height: 79px; /* includes transparent part */
  cursor: pointer;
  margin: 0;
  width: 100%;
}

html {
  padding: 0 0 58px 0; /* 58px = height of the opaque part of the Catfish */
}

IEhack.css

:

div#zip {
  width: 100%;
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: auto;
  position: relative;
}

catfish.js Komen bersyarat (contoh):

function wrapFish() {
  // ... (JavaScript code to wrap the content in div#zip for IE) ...
}

Pendekatan ini memastikan pengalaman pengguna yang konsisten merentasi pelayar sambil meminimumkan kod yang tidak perlu. Penambahbaikan selanjutnya, seperti pemilihan spanduk bersyarat dan kawalan penempatan, akan meningkatkan fungsi.

Atas ialah kandungan terperinci Lele - Bahagian 1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!