备案权重域名预定

 找回密碼
 加入我們

手機網站移動廣告固定懸浮在頁面底部的AdSense廣告代碼 DIV實現

[複製鏈接]
admin 發表於 2015-5-27 12:40:26 | 顯示全部樓層 |閱讀模式
  1. <style type="text/css">
  2. html,body{height:100%;margin:0;padding:0;}
  3. #bottomDiv{ /*Code for Moz, Opera, etc.*/
  4. height:50px;
  5. width:100%;
  6. background:#9bb;
  7. position:fixed;
  8. bottom:0;
  9. }
  10. #scaleDiv{
  11. position:absolute;
  12. visibility:hidden;
  13. height:100%;
  14. }
  15. </style>
  16. <!--[if IE]>
  17. <style type="text/css"> /*IE-specific markup*/
  18. #bottomDiv{
  19. position:absolute;
  20. top:expression(offsetParent.scrollTop + (document.getElementById("scaleDiv").offsetHeight-50));
  21. }
  22. </style>
  23. <![endif]-->


  24. <div id="scaleDiv">
  25. <!-- this div is to find browser page display height -->
  26. </div>
  27. <div style="font:4em Verdana;padding-bottom:2em;"><!-- bottom padding allows content to clear on scroll -->
  28. hello hello<br/>
  29. hello hello<br/>
  30. hello hello<br/>
  31. hello hello<br/>
  32. hello hello<br/>
  33. hello hello<br/>
  34. hello hello<br/>
  35. hello hello<br/>
  36. hello hello<br/>
  37. hello hello<br/>
  38. hello hello<br/>
  39. hello hello<br/>
  40. hello hello<br/>
  41. hello hello<br/>
  42. hello hello<br/>
  43. hello hello<br/>
  44. hello hello<br/>
  45. hello hello<br/>
  46. hello hello<br/>
  47. hello hello<br/>



  48. </div>
  49. <div id="bottomDiv">
  50. <p style="text-align: center; color: white">I am here</p>
  51. </div>
複製代碼


移動互聯網時代,google增加了自適應的廣告,移動適配屏幕尺寸成為主流,一直在底部顯示的廣告能增加廣告點擊率,很多移動站點都使用了這個功能
如果不想修改整個代碼,可以結合JS代碼來調用這個樣式

測試了下 通過一段代碼也可以實現 不需要在head中 直接在body中使用 大家可以再測試下不同手機瀏覽器的兼容性問題

桌面瀏覽器在線測試工具:
  1. http://www.w3school.com.cn/tiy/t.asp?f=html_style
複製代碼
回復

使用道具 舉報

 樓主| admin 發表於 2015-5-27 13:22:23 | 顯示全部樓層
測試了一段簡潔的代碼:

  1. <div style="height:60px; width:100%; position:fixed; bottom:0; background:#9bb;">
  2. <p style="text-align: center; color: white">I am here</p>
  3. </div>
複製代碼


回復 支持 反對

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 加入我們

本版積分規則

备案权重域名预定

4um點擊跨境網編創業社區

GMT+8, 2024-10-30 15:27

By DZ X3.5

QQ

快速回復 返回頂部 返回列表