cat魚 - 第1部分

>本文解釋瞭如何創建一個持久的“ catfish”廣告橫幅，即使在滾動時，該橫幅仍在網頁的底部仍然可見。 該技術結合了CSS和JavaScript，以及用於Internet Explorer的特殊處理。

密鑰概念：

>
• 持續的底部橫幅：核心功能是使用CSS（）放置在頁面底部的DIV元素。 position: fixed
跨瀏覽器兼容性：使用
• 的初始CSS方法在Internet Explorer的較舊版本中不起作用。 該解決方案涉及有條件的註釋和DOM操縱，以僅為IE添加包裝器Div（進行橫幅，在包裝器中管理滾動。 position: fixed div#zipposition: absolute> ie特定的處理：自定義的JavaScript函數（overflow: auto）動態地將包裝器div注入IE DOM中，確保兼容性而不會影響其他瀏覽器。
• >條件註釋：這些註釋允許特定於瀏覽器的CSS和JavaScript包含。 這樣可以確保只有IE收到修復所需的額外標記。 > wrapFish有效的標記：僅添加了Internet Explorer的額外DIV和相關樣式，避免了其他瀏覽器的不必要的膨脹。 >
• 代碼片段：

>以下代碼段說明了使用的CSS和JavaScript。 請注意，這是一個簡化的演示版本。

>

：

： 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這種方法可確保跨瀏覽器的一致用戶體驗，同時最大程度地減少不必要的代碼。 進一步的改進，例如有條件的橫幅選擇和放置控制，將增強功能。

以上是cat魚 - 第1部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！