lai坚
lai坚

jquery_css_兼容浏览器的居中弹出层

js_css_兼容浏览器的居中弹出层
修改收藏了一些

DEMO1 (推荐):
 

  
  
  
  
    
   
   
   
   
  1. <title>js_css_兼容浏览器的居中弹出层</title>   
    2. 
   
   
   
   
  2. <style type="text/css">   
    3. 
   
   
   
   
  3. <!--   
    4. 
   
   
   
   
  4. html,body {height:100%; margin:0px; font-size:12px;}   
    5. 
   
   
   
   
  5. .mydiv {   
    6. 
   
   
   
   
  6. background-color: #FFCC66;   
    7. 
   
   
   
   
  7. border: 1px solid #f00;   
    8. 
   
   
   
   
  8. text-align: center;   
    9. 
   
   
   
   
  9. line-height: 40px;   
    10. 
   
   
   
   
  10. font-size: 12px;   
    11. 
   
   
   
   
  11. font-weight: bold;   
    12. 
   
   
   
   
  12. z-index:999;   
    13. 
   
   
   
   
  13. width: 300px;   
    14. 
   
   
   
   
  14. height: 120px;   
    15. 
   
   
   
   
  15. left:50%;   
    16. 
   
   
   
   
  16. top:50%;   
    17. 
   
   
   
   
  17. margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */   
    18. 
   
   
   
   
  18. margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/   
    19. 
   
   
   
   
  19. margin-top:0px;   
    20. 
   
   
   
   
  20. position:fixed!important;/* FF IE7*/   
    21. 
   
   
   
   
  21. position:absolute;/*IE6*/   
    22. 
   
   
   
   
  22. _top:       expression(eval(document.compatMode &&   
    23. 
   
   
   
   
  23.             document.compatMode=='CSS1Compat') ?   
    24. 
   
   
   
   
  24.             documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/   
    25. 
   
   
   
   
  25.             document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/   
    26. 
   
   
   
   
  26. }   
    27. 
   
   
   
   
  27. .bg,.popIframe {   
    28. 
   
   
   
   
  28. background:#ecc; display:none;   
    29. 
   
   
   
   
  29. width: 100%;   
    30. 
   
   
   
   
  30. height: 100%;   
    31. 
   
   
   
   
  31. left:0;   
    32. 
   
   
   
   
  32. top:0;/*FF IE7*/   
    33. 
   
   
   
   
  33. filter:alpha(opacity=50);/*IE*/   
    34. 
   
   
   
   
  34. opacity:0.5;/*FF*/   
    35. 
   
   
   
   
  35. z-index:1;   
    36. 
   
   
   
   
  36. position:fixed!important;/*FF IE7*/   
    37. 
   
   
   
   
  37. position:absolute;/*IE6*/   
    38. 
   
   
   
   
  38. _top:       expression(eval(document.compatMode &&   
    39. 
   
   
   
   
  39.             document.compatMode=='CSS1Compat') ?   
    40. 
   
   
   
   
  40.             documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/   
    41. 
   
   
   
   
  41.             document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);   
    42. 
   
   
   
   
  42. }   
    43. 
   
   
   
   
  43. .popIframe {   
    44. 
   
   
   
   
  44. filter:alpha(opacity=0);/*IE*/   
    45. 
   
   
   
   
  45. opacity:0;/*FF*/   
    46. 
   
   
   
   
  46. }   
    47. 
   
   
   
   
  47. -->   
    48. 
   
   
   
   
  48. </style>   
    49. 
   
   
   
   
  49. <script language="javascript" type="text/javascript">   
    50. 
   
   
   
   
  50. function showDiv(){   
    51. 
   
   
   
   
  51. document.getElementById('popDiv').style.display='block';   
    52. 
   
   
   
   
  52. document.getElementById('popIframe').style.display='block';   
    53. 
   
   
   
   
  53. document.getElementById('bg').style.display='block';   
    54. 
   
   
   
   
  54. }   
    55. 
   
   
   
   
  55. function closeDiv(){   
    56. 
   
   
   
   
  56. document.getElementById('popDiv').style.display='none';   
    57. 
   
   
   
   
  57. document.getElementById('bg').style.display='none';   
    58. 
   
   
   
   
  58. document.getElementById('popIframe').style.display='none';   
    59. 
   
   
   
   
  59. }   
    60. 
   
   
   
   
  60. </script>   
    61. 
   
   
   
   
  61. </head>   
    62. 
   
   
   
   
  62. <body>   
    63. 
   
   
   
   
  63. <div id="popDiv" class="mydiv" style="display:none;">网页设计大本营欢迎你！<br/>Q群号:29032448<br/>   
    64. 
   
   
   
   
  64. <a href="javascript:closeDiv()">关闭窗口</a></div>   
    65. 
   
   
   
   
  65. <div id="bg" class="bg" style="display:none;"></div>   
    66. 
   
   
   
   
  66. <a href="javascript:showDiv()">点击这里弹出层</a>   
    67. 
   
   
   
   
  67. <iframe id='popIframe' class='popIframe' frameborder='0' ></iframe>   
    68. 
   
   
   
   
  68. </body>   
    69. 
   
   
   
   
  69. </html>
    70.

DEMO2:
 

  
  
  
  
    
   
   
   
   
  1. <title>jquery弹出层</title>   
    2. 
   
   
   
   
  2. <script type="text/javascript" src="jquery-1.3.2.js"></script>   
    3. 
   
   
   
   
  3. <style type="text/css">   
    4. 
   
   
   
   
  4. #dialog-overlay {   
    5. 
   
   
   
   
  5.     width:100%;   
    6. 
   
   
   
   
  6.     height:100%;   
    7. 
   
   
   
   
  7.     filter:alpha(opacity=50);   
    8. 
   
   
   
   
  8.     -moz-opacity:0.5;   
    9. 
   
   
   
   
  9.     -khtml-opacity: 0.5;   
    10. 
   
   
   
   
  10.     opacity: 0.5;   
    11. 
   
   
   
   
  11.     position:absolute;   
    12. 
   
   
   
   
  12.     background:#000;   
    13. 
   
   
   
   
  13.     top:0; left:0;   
    14. 
   
   
   
   
  14.     z-index:3000;   
    15. 
   
   
   
   
  15.     display:none;   
    16. 
   
   
   
   
  16. }   
    17. 
   
   
   
   
  17. #dialog-box {   
    18. 
   
   
   
   
  18.     -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);   
    19. 
   
   
   
   
  19.     -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);   
    20. 
   
   
   
   
  20.     -moz-border-radius: 5px;   
    21. 
   
   
   
   
  21.     -webkit-border-radius: 5px;   
    22. 
   
   
   
   
  22.       
    23. 
   
   
   
   
  23.     background:#eee;   
    24. 
   
   
   
   
  24.     width:328px;   
    25. 
   
   
   
   
  25.     position:absolute;   
    26. 
   
   
   
   
  26.     z-index:5000;   
    27. 
   
   
   
   
  27.     display:none;   
    28. 
   
   
   
   
  28. }   
    29. 
   
   
   
   
  29. #dialog-box .dialog-content {   
    30. 
   
   
   
   
  30.     text-align:left;   
    31. 
   
   
   
   
  31.     padding:10px;   
    32. 
   
   
   
   
  32.     margin:13px;   
    33. 
   
   
   
   
  33.     color:#666;   
    34. 
   
   
   
   
  34.     font-family:arial;   
    35. 
   
   
   
   
  35.     font-size:11px;   
    36. 
   
   
   
   
  36. }   
    37. 
   
   
   
   
  37. a.button {   
    38. 
   
   
   
   
  38.     margin:10px auto 0 auto;   
    39. 
   
   
   
   
  39.     text-align:center;   
    40. 
   
   
   
   
  40.     background-color: #e33100;   
    41. 
   
   
   
   
  41.     display: block;   
    42. 
   
   
   
   
  42.     width:50px;   
    43. 
   
   
   
   
  43.     padding: 5px 10px 6px;   
    44. 
   
   
   
   
  44.     color: #fff;   
    45. 
   
   
   
   
  45.     text-decoration: none;   
    46. 
   
   
   
   
  46.     font-weight: bold;   
    47. 
   
   
   
   
  47.     line-height: 1;   
    48. 
   
   
   
   
  48.     -moz-border-radius: 5px;   
    49. 
   
   
   
   
  49.     -webkit-border-radius: 5px;   
    50. 
   
   
   
   
  50.     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);   
    51. 
   
   
   
   
  51.     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);   
    52. 
   
   
   
   
  52.     text-shadow: 0 -1px 1px rgba(0,0,0,0.25);   
    53. 
   
   
   
   
  53.     border-bottom: 1px solid rgba(0,0,0,0.25);   
    54. 
   
   
   
   
  54.     position: relative;   
    55. 
   
   
   
   
  55.     cursor: pointer;   
    56. 
   
   
   
   
  56.       
    57. 
   
   
   
   
  57. }   
    58. 
   
   
   
   
  58. a.button:hover {   
    59. 
   
   
   
   
  59.     background-color: #c33100;      
    60. 
   
   
   
   
  60. }   
    61. 
   
   
   
   
  61. #dialog-box .dialog-content p {   
    62. 
   
   
   
   
  62.     font-weight:700; margin:0;   
    63. 
   
   
   
   
  63. }   
    64. 
   
   
   
   
  64. #dialog-box .dialog-content ul {   
    65. 
   
   
   
   
  65.     margin:10px 0 10px 20px;   
    66. 
   
   
   
   
  66.     padding:0;   
    67. 
   
   
   
   
  67.     height:50px;   
    68. 
   
   
   
   
  68. }   
    69. 
   
   
   
   
  69. </style>   
    70. 
   
   
   
   
  70. <script type="text/javascript">   
    71. 
   
   
   
   
  71. $(document).ready(function () {   
    72. 
   
   
   
   
  72.     $('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {          
    73. 
   
   
   
   
  73.         $('#dialog-overlay, #dialog-box').hide();          
    74. 
   
   
   
   
  74.         return false;   
    75. 
   
   
   
   
  75.     });   
    76. 
   
   
   
   
  76.     $(window).resize(function () {   
    77. 
   
   
   
   
  77.         if (!$('#dialog-box').is(':hidden')) popup();          
    78. 
   
   
   
   
  78.     });      
    79. 
   
   
   
   
  79.       
    80. 
   
   
   
   
  80.       
    81. 
   
   
   
   
  81. });   
    82. 
   
   
   
   
  82. //Popup dialog   
    83. 
   
   
   
   
  83. function popup(message) {   
    84. 
   
   
   
   
  84.     var maskHeight = $(document).height();    
    85. 
   
   
   
   
  85.     var maskWidth = $(window).width();   
    86. 
   
   
   
   
  86.     var dialogTop =  (maskHeight/3) - ($('#dialog-box').height());    
    87. 
   
   
   
   
  87.     var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);   
    88. 
   
   
   
   
  88.     $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();   
    89. 
   
   
   
   
  89.     $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();   
    90. 
   
   
   
   
  90.     $('#dialog-message').html(message);   
    91. 
   
   
   
   
  91.               
    92. 
   
   
   
   
  92. }   
    93. 
   
   
   
   
  93. </script>   
    94. 
   
   
   
   
  94. </head>   
    95. 
   
   
   
   
  95. <body>   
    96. 
   
   
   
   
  96. <a href="javascript:popup('网站运营、软件应用、设计教程、编程开发与IT资讯等内容，同时有源码下载、站长工具、在线手册、免费资源等内容，是国内快捷易懂、内容丰富的网上学习网站。')">猛击此处，弹出层!</a>   
    97. 
   
   
   
   
  97. <div id="dialog-overlay"></div>   
    98. 
   
   
   
   
  98. <div id="dialog-box">   
    99. 
   
   
   
   
  99.     <div class="dialog-content">   
    100. 
   
   
   
   
  100.         <div id="dialog-message"></div>   
    101. 
   
   
   
   
  101.         <a href="#" class="button">关闭</a>   
    102. 
   
   
   
   
  102.     </div>   
    103. 
   
   
   
   
  103. </div>   
    104. 
   
   
   
   
  104. </body>   
    105. 
   
   
   
   
  105. </html>   
    106. 
   
   
   
   
  106.  
    107.

 

 

DEMO3 (推荐):

 

  
  
  
  
    
   
   
   
   
  1. <title>jquery 弹出层固定居中</title>   
    2. 
   
   
   
   
  2. <style type="text/css">   
    3. 
   
   
   
   
  3. body {   
    4. 
   
   
   
   
  4.     font-family:Arial, Helvetica, sans-serif;   
    5. 
   
   
   
   
  5.     font-size:12px;   
    6. 
   
   
   
   
  6.     margin:0;   
    7. 
   
   
   
   
  7. }   
    8. 
   
   
   
   
  8. #main {   
    9. 
   
   
   
   
  9.     height:1800px;   
    10. 
   
   
   
   
  10.     padding-top:90px;   
    11. 
   
   
   
   
  11.     text-align:center;   
    12. 
   
   
   
   
  12. }   
    13. 
   
   
   
   
  13. #fullbg {   
    14. 
   
   
   
   
  14.     background-color:Gray;   
    15. 
   
   
   
   
  15.     left:0px;   
    16. 
   
   
   
   
  16.     opacity:0.5;   
    17. 
   
   
   
   
  17.     position:absolute;   
    18. 
   
   
   
   
  18.     top:0px;   
    19. 
   
   
   
   
  19.     z-index:3;   
    20. 
   
   
   
   
  20.     filter:alpha(opacity=50); /* IE6 */   
    21. 
   
   
   
   
  21.     -moz-opacity:0.5; /* Mozilla */   
    22. 
   
   
   
   
  22.     -khtml-opacity:0.5; /* Safari */   
    23. 
   
   
   
   
  23. }   
    24. 
   
   
   
   
  24. #dialog {   
    25. 
   
   
   
   
  25.     background-color:#FFF;   
    26. 
   
   
   
   
  26.     border:1px solid #888;   
    27. 
   
   
   
   
  27.     display:none;   
    28. 
   
   
   
   
  28.     height:200px;   
    29. 
   
   
   
   
  29.     left:50%;   
    30. 
   
   
   
   
  30.     margin:-100px 0 0 -100px;   
    31. 
   
   
   
   
  31.     padding:12px;   
    32. 
   
   
   
   
  32.     position:fixed !important; /* 浮动对话框 */   
    33. 
   
   
   
   
  33.     position:absolute;   
    34. 
   
   
   
   
  34.     top:50%;   
    35. 
   
   
   
   
  35.     width:200px;   
    36. 
   
   
   
   
  36.     z-index:5;   
    37. 
   
   
   
   
  37. }   
    38. 
   
   
   
   
  38. #dialog p {   
    39. 
   
   
   
   
  39.     margin:0 0 12px;   
    40. 
   
   
   
   
  40. }   
    41. 
   
   
   
   
  41. #dialog p.close {   
    42. 
   
   
   
   
  42.     text-align:right;   
    43. 
   
   
   
   
  43. }   
    44. 
   
   
   
   
  44. </style>   
    45. 
   
   
   
   
  45. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>   
    46. 
   
   
   
   
  46. <script type="text/javascript">   
    47. 
   
   
   
   
  47. //显示灰色 jQuery 遮罩层   
    48. 
   
   
   
   
  48. function showBg() {   
    49. 
   
   
   
   
  49.     var bh = $("body").height();   
    50. 
   
   
   
   
  50.     var bw = $("body").width();   
    51. 
   
   
   
   
  51.     $("#fullbg").css({   
    52. 
   
   
   
   
  52.         height:bh,   
    53. 
   
   
   
   
  53.         width:bw,   
    54. 
   
   
   
   
  54.         display:"block"   
    55. 
   
   
   
   
  55.     });   
    56. 
   
   
   
   
  56.     $("#dialog").show();   
    57. 
   
   
   
   
  57. }   
    58. 
   
   
   
   
  58. //关闭灰色 jQuery 遮罩   
    59. 
   
   
   
   
  59. function closeBg() {   
    60. 
   
   
   
   
  60.     $("#fullbg,#dialog").hide();   
    61. 
   
   
   
   
  61. }   
    62. 
   
   
   
   
  62. </script>   
    63. 
   
   
   
   
  63. <!--[if lte IE 6]>   
    64. 
   
   
   
   
  64. <script type="text/javascript">   
    65. 
   
   
   
   
  65. // 浮动对话框   
    66. 
   
   
   
   
  66. $(document).ready(function() {   
    67. 
   
   
   
   
  67.     var domThis = $('#dialog')[0];   
    68. 
   
   
   
   
  68.     var wh = $(window).height() / 2;   
    69. 
   
   
   
   
  69.     $("body").css({   
    70. 
   
   
   
   
  70.         "background-image": "url(about:blank)",   
    71. 
   
   
   
   
  71.         "background-attachment": "fixed"   
    72. 
   
   
   
   
  72.     });   
    73. 
   
   
   
   
  73.     domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + wh + ') + "px"');   
    74. 
   
   
   
   
  74. });   
    75. 
   
   
   
   
  75. </script>   
    76. 
   
   
   
   
  76. <![endif]-->   
    77. 
   
   
   
   
  77. </head>   
    78. 
   
   
   
   
  78. <body>   
    79. 
   
   
   
   
  79. <div id="main"> <a href="#" onclick="showBg();">点击这里看 jQuery 遮罩层效果.</a> </div>   
    80. 
   
   
   
   
  80. <!-- jQuery 遮罩层 -->   
    81. 
   
   
   
   
  81. <div id="fullbg"></div>   
    82. 
   
   
   
   
  82. <!-- end jQuery 遮罩层 -->   
    83. 
   
   
   
   
  83. <!-- 对话框 -->   
    84. 
   
   
   
   
  84. <div id="dialog">   
    85. 
   
   
   
   
  85.   <p class="close"><a href="#" onclick="closeBg();">关闭</a></p>   
    86. 
   
   
   
   
  86.   <p>正在加载，请稍后...</p>   
    87. 
   
   
   
   
  87. </div>   
    88. 
   
   
   
   
  88. <!-- jQuery 遮罩层上方的对话框 -->   
    89. 
   
   
   
   
  89. </body>   
    90. 
   
   
   
   
  90. </html>   
    91. 
   
   
   
   
  91.  
    92.

 

你可能感兴趣的:(jquery,屏幕,兼容,居中,滚动)

  • 移动端城市区县二级联动选择功能实现包 good2know
    本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
  • ARM 和 AMD 架构的区别 m0_69576880 arm开发windows架构
    ARM架构和AMD架构是两种不同的计算机处理器架构，它们有以下几个主要区别：设计出发点、兼容性、性能特点、市场定价。设计出发点：①ARM构架：ARM架构最初是为嵌入式系统设计的，旨在提供低功耗和高效能的解决方案。它主要应用于移动设备、嵌入式系统和物联网设备②AMD架构：AMD架构是基于x86架构的扩展，旨在提供与Intel架构兼容的处理器。它主要用于台式机、服务器和工作站等计算机系统。兼容性：AR
  • 前端面试每日 3+1 —— 第39天 浪子神剑
    今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
  • 如何在 Ubuntu 24.04 或 22.04 Linux 上安装和使用 NoMachine 山岚的运维笔记 Linux运维及使用linuxubuntu运维nomachine远程连接
    NoMachine是一款适用于Linux（Ubuntu）及其他支持的操作系统的远程桌面应用程序，允许用户通过本地或远程系统从世界任何地方控制计算机。它可以在低带宽连接下工作，被专业人士和家庭用户广泛使用。NoMachine的主要功能高性能远程访问跨平台兼容性易于使用，因为用户界面友好提供强大的加密协议，如SSH、SSL及其他安全标准支持远程文件传输和打印服务允许从远程计算机进行音频和视频流媒体传输
  • 移动端适配rem方案 简单的码农
    1.rem+动态html的font-size1.rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。2.比如如下案例：设置一个盒子的宽度是2rem；设置不同的屏幕上html的font-size不同；image这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的font-s
  • R语言笔记Day1（排序、筛选以及分类汇总）） 养猪场小老板
    一、排序1、单变量序列排序2、数据表（矩阵）排序二、筛选三、分类汇总一、排序1、单变量序列排序rank、sort和order函数>aa[1]315#rank用来计算序列中每个元素的秩#这里的“秩”可以理解为该元素在序列中由小到大排列的次序#上面例子给出的序列[3,1,5]中，1最小，5最大，3居中#于是1的秩为1，3的秩为2，5的秩为3，(3,1,5)对应的秩的结果就是(2,1,3)>rank(a
  • 自定义参数解析器HandlerMethodArgumentResolver，重新定义@ResponseBody的请求方式 chanyi
    1、解决的问题加了@ResponseBody注解的方法，请求的方式是post的json格式，但如果我们也要通过post的application/x-www-form-urlencoded格式访问此接口。在不改变此接口的情况下。通过修改参数解析器HandlerMethodArgumentResovler来兼容两种请求方法。2、思路根据不同的content-type使用不同参数解析处理器。Conten
  • 朱一龙已经演过几十部剧？是金子总会发光的！ 守护你的喵
    这段时间，朱一龙，真的可以说爆火，演技毋庸置疑，颜值很高，作为一个颜值党，朱一龙还真的蛮帅的！往年轻里打扮可以当鲜肉，往成熟打扮真的man。不知道大家有没有发现居老师的眼睛很迷人，很漂亮的眼睛，眼神里也很有戏，隔着屏幕都不太敢去对视，因为随时可能都会被电到的感觉！但其实，朱一龙其实已经出道很多年了，演过了几十部剧演过皇家贵子，演过军阀，演过富二代......居老师的角色太多了，但每一部都很用心，对
  • Android CameraX 使用指南：简化相机开发 安卓开发者 AndroidJetpack数码相机android
    前言在Android开发中，相机功能一直是比较复杂的部分，需要处理不同设备的兼容性、生命周期管理以及复杂的API调用。Google推出的CameraX库极大地简化了这一过程，让开发者能够更轻松地实现高质量的相机功能。本文将带你全面了解CameraX的使用方法。什么是CameraX？CameraX是Jetpack系列中的一个库，它基于Camera2API构建，但提供了更高层次的抽象，具有以下优点：简
  • ubnutu网络
    ubnutu网络‍在Ubuntu系统中连接外网（外部网络）的方法主要取决于你的网络环境（有线/无线）和网络类型（DHCP自动分配或静态IP），以下是常见的连接方式：一、通过图形界面连接（适合桌面版）1.有线网络（以太网）直接用网线连接电脑和路由器/交换机，系统通常会自动检测并通过DHCP获取IP地址，无需额外配置。若未自动连接：点击屏幕右上角的网络图标（类似Wi-Fi或网线图标）。在弹出的菜单中，
  • 11. HTML 中 DOCTYPE 的作用 yqcoder 前端面试-CSShtml前端
    总结H5的声明HTML5的DOCTYPE声明HTML5中的声明用于告诉浏览器当前文档使用的是HTML5的文档类型。它必须是文档中的第一行内容（在任何HTML标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE的作用触发标准模式：DOCTYPE声明的主要作用是让浏览器以标准模式（StandardsMode）来解析和渲染页面，而不是以兼容模式（QuirksMode）。兼容性：在没有DOCT
  • TiDB - 分布式数据库的架构与特性 爽新全效瓷兔膏
    本文还有配套的精品资源，点击获取简介：TiDB是一个开源的分布式NewSQL数据库，受到了Google的Spanner/F1系统的启发。它提供水平扩展和强一致性事务，适用于需要高可用性和大规模数据处理的场景。TiDB的核心特点包括其分布式架构，由TiDBServer（SQL层）、PDServer（调度器）和TiKVServer（存储引擎）组成；支持无缝的水平扩展和ACID事务；与MySQL高度兼容
  • 精通 Tableau 2023（四） 绝不原创的飞龙 默认分类默认分类
    原文：annas-archive.org/md5/dd6efaef313fee7252226d3af4a0b9fd译者：飞龙协议：CCBY-NC-SA4.0第十三章：提升性能一旦人们熟悉了Tableau的功能，他们很快就会遇到另一种类型的问题：性能。你们可能都曾经在屏幕上盯着加载数据或执行查询的字样发呆。但别担心，我们有办法！如果设计得当，Tableau仪表盘即使处理大量数据也能表现得非常好。本章
  • 塔能科技物联运维平台及城市照明市场竞争力分析 塔能物联运维 大数据
    关于塔能科技的物联运维平台，就其在城市照明领域所具备的市场竞争力而言，可以从技术架构层面、行业适配的实际情况、市场策略方面以及所面临的种种挑战等不同角度展开剖析。一、物联运维平台的核心竞争力1.技术架构优势-全协议兼容的物联网接入能力其能够适配诸如LPWAN（涵盖LoRa、NB-IoT等）、4G/5G、Zigbee这类多种多样的协议，并且可以同时接入像照明设备、环境监测仪器以及电力设施等各不相同类
  • DNF 与 YUM 的区别详解：从 CentOS 7 到 CentOS 9 的演进
    DNF与YUM的区别详解：从CentOS7到CentOS9的演进标签：CentOS、YUM、DNF、Linux包管理、系统升级、兼容性适用版本：CentOS7、CentOS8、CentOS9一、背景介绍CentOS中使用的包管理工具是RedHat系列系统的重要组成部分。随着系统版本升级，包管理器从yum（CentOS7）逐渐过渡到dnf（CentOS8及之后版本）。二、YUM与DNF对比表对比项Y
  • 哪有什么一夜暴富 所有的成功都是厚积薄发 憨寒hh
    大多数人只是别人一夜暴富的见证者经常一觉起来拿起手机，就能看到哪个网红又日进斗金了，哪个KOL又月销量几千万了。再看看自己的腰包和自己每日的工作回报，隔着屏幕都想骂街。以前没有互联网我不用了解更多人的生活，但如今，李佳琦、草根网红，年入千万，价值几亿，风头，大鳄，豪宅......这种词频繁出现在你的手机上，我又怎么能像上个时代的前辈们那么处之泰然？为什么越来越多的人抱怨自己的原生家庭和出生的不公平
  • 萧 曹海英河南许昌襄城宁庄中心小学
    图片发自App我们期盼了一星期的阳光音乐到来了，孩子们收拾好东西，就坐到位子上等着上课。看到别的学校孩子们精彩的瞬间，开心的喊着，叫着:真好;并且也能读出了优秀老师的名字。到了优秀学校，又看到了我们的学校，又拍手又喊叫:“老师，老师，有我们，有我们！”并开心的鼓掌。图片发自App图片发自App到了开始上课时，眼睛目不转晴的看着屏幕，屏幕里严冬梅老师给孩子们介绍了一种新乐器，《萧》。严老师还教孩子们
  • 隔着屏幕都能闻到香味，《田耕纪》打开吃货新地图，网友：看饿了 3cdd932a5bd9
    在人们越来越讲究吃的当下，不少古装剧也开始把视角放在美食上。没想到，就在2023年继《卿卿日常》把九个省的美食文化发扬光大后，又有一部小成本古装轻喜剧，靠着乡间家常美食成功俘获网友的心。这部剧就是日前刚开播不久的《田耕纪》，由新生代演员田曦薇和曾舜晞主演。有网友甚至发文称，“《田耕纪》看得光想吃东西~~”还有网友说：“田耕纪真不能晚上看，越看越馋！之前是肉麦饼，昨天是蒜香花生，，今天会是什么呢？别
  • 电脑开机不显示网卡的原因 小魚資源大雜燴 电脑
    驱动程序问题：驱动程序未安装、损坏或过时都可能导致系统无法识别网卡。例如电脑新装或更新系统后，可能未安装适配的网卡驱动，或者驱动文件在使用过程中损坏，又或者安装了不兼容的驱动版本，都会使网卡无法正常工作，在设备管理器中可能表现为网卡设备带有黄色感叹号或问号，或直接不显示网卡设备。硬件连接问题：对于台式机的独立网卡，可能存在网卡与主板PCI或PCI-E插槽接触不良的情况。长时间使用后，灰尘积累或网卡
  • 服务器开机后显示器不显示,hp DL380 G7服务器无法开机,屏幕没显示
    服务器型号：HPDL380G72U机架式服务器服务器故障：服务器无法开机，显示器没有一点反应。系统健康指示灯红灯闪烁，更换服务器电源也无法开机，双内存+双CPU，判断是主板故障。更换主板后顺利进入系统。产品结构：2U处理器CPU频率：2.13GHz标配CPU数量：1颗最大CPU数量：2颗制程工艺：32nm三级缓存：8MB总线规格：QPI4.8GT/sCPU核心：四核CPU线程数：四线程主板扩展槽：
  • 第七篇 快速开始-序 深圳都这么冷
    快速开始欢迎使用React文档！本页将向您介绍您每天会用到的80%的React概念。本章内容预告如何创建和嵌套组件如何添加标记和样式如何显示数据如何渲染条件表达式和列表表达式如何响应事件和更新屏幕如何在组件之间共享数据创建和嵌套组件React应用程序由组件组成。组件是UI（用户界面）的一部分，具有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。React组件是返回标记的JavaScri
  • Android 五大布局之线性布局和相对布局 qq_41437225 Android五大布局之（一）线性布局和相对布局android布局线性布局相对布局
    Android五大布局之线性布局和相对布局RelativeLayout的相关的属性相对布局第一类：属性值为true和false的：android:layout_centerHrizontal水平居中android:layout_centerVertial垂直居中android:layout_centerInparent相对于父元素完全居中android:layout_alignParentBott
  • Python爬虫【三十四章】爬虫高阶：动态页面处理与Playwright增强控制深度解析 程序员_CLUB Python入门到进阶python爬虫开发语言
    目录一、技术演进背景与行业挑战二、核心技术栈深度解析2.1动态渲染双引擎架构2.2浏览器指纹伪装方案2.3BeautifulSoup集成实践三、进阶应用场景突破3.1电商价格监控系统3.1.1技术架构创新3.1.2实现效果3.2社交媒体舆情分析3.2.1无限滚动模拟3.2.2WebSocket监控3.2.3Canvas指纹防护四、性能优化与合规方案4.1资源消耗对比测试4.2反爬对抗升级方案五、总
  • 适配器模式 困火
    1.适配器模式适配器模式（Adapter）：将一个类的接口转换成客户希望的另外一个接口。adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。适用场景：1、已经存在的类的接口不符合我们的需求；2、创建一个可以复用的类，使得该类可以与其他不相关的类或不可预见的类（即那些接口可能不一定兼容的类）协同工作；3、在不对每一个都进行子类化以匹配它们的接口的情况下，使用一些已经存在的子类
  • 新年到 小竹笋的天空
    新年到了一阵阵鞭炮声响彻云宵孩子们一个个都穿上了红色衣裳拿着一枚枚鲜红色的鞭炮当一束束烟花射向天际每一个人都知道——新的一年已到来到一缕缕饭香弥漫在屋里当人们坐上餐桌前的长板凳就已经知道——新的一年已经来到当电视机的屏幕出现2019的字样人们就已经知道——新的一年已经来到新年里我们要立下远大的目标因为我们知道——新的一年已经来到2019-02-4
  • Android应用程序UI架构
    概述Android系统采用一种称为Surface的UI架构为应用程序提供用户界面。在Android应用程序中，每一个Activity组件都关联有一个或者若干个窗口，每一个窗口都对应有一个Surface。有了这个Surface之后，应用程序就可以在上面渲染窗口的UI。最终这些已经绘制好了的Surface都会被统一提交给Surface管理服务SurfaceFlinger进行合成，最后显示在屏幕上面。无
  • 生产环境使用云服务器（centOS）部署和使用MongoDB
    部署MongoDB流程1.安装MongoDB版本选择建议CentOS7：推荐MongoDB4.4.x（兼容性好）CentOS8/9：建议最新稳定版（如6.0+），需单独安装mongodb-database-tools安装步骤1.添加官方仓库#添加官方仓库（以6.0为例）sudovi/etc/yum.repos.d/mongodb-org-6.0.repo写入以下内容：[mongodb-org-6.
  • Android操作系统的UI适配方案研究 操作系统内核探秘 操作系统内核揭秘androiduiai
    Android操作系统的UI适配方案研究关键词：AndroidUI适配、屏幕密度、分辨率适配、约束布局、多屏幕支持、响应式设计、dp/sp单位摘要：本文深入探讨Android操作系统中的UI适配问题及其解决方案。文章从基础概念入手，分析Android碎片化带来的适配挑战，详细介绍多种适配方案的技术原理和实现方法，包括尺寸单位、布局技术、资源限定符等。通过实际代码示例和数学模型，展示如何构建适应不同
  • Django ORM bulk_create MySQL 冲突处理深度解析：`bulk_create` 替代方案与最佳实践
    MySQL不直接支持bulk_create的ignore_conflicts和update_conflicts参数。这些功能是PostgreSQL和SQLite特有的扩展。下面我将详细解释MySQL中的替代方案：一、MySQL不支持冲突处理参数的原因技术限制SQL标准差异：PostgreSQL/SQLite使用ONCONFLICT子句MySQL使用ONDUPLICATEKEYUPDATE语法不兼容
  • Python YAML文件处理完全指南：从入门到精通 Yant224 python#文件操作与异常处理pythonYAML配置文件处理数据序列化PyYAMLruamel.yaml
    一、YAML基础与Python环境搭建1.YAML简介YAML（YAMLAin’tMarkupLanguage）是一种人类可读的数据序列化格式，特点：使用缩进表示层级关系支持复杂数据结构包含注释功能跨语言兼容2.核心特性对比特性YAMLJSONXML可读性★★★★★★★☆☆☆★★★☆☆注释支持✅❌✅数据类型丰富基本基本语法复杂度简单简单复杂3.安装PythonYAML库#安装PyYAML（基础库）
  • jquery实现的jsonp掉java后台 知了ing javajsonpjquery
    什么是JSONP？ 先说说JSONP是怎么产生的： 其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，小可不才，试着用自己的方式来阐释一下这个问题，看看是否有帮助。 1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； 2、
  • Struts2学习笔记 caoyong struts2
    SSH : Spring + Struts2 + Hibernate 三层架构(表示层,业务逻辑层,数据访问层) MVC模式 (Model View Controller) 分层原则:单向依赖，接口耦合 1、Struts2  =  Struts  + Webwork 2、搭建struts2开发环境    a>、到www.apac
  • SpringMVC学习之后台往前台传值方法 满城风雨近重阳 springMVC
    springMVC控制器往前台传值的方法有以下几种： 1.ModelAndView    通过往ModelAndView中存放viewName：目标地址和attribute参数来实现传参：      ModelAndView mv=new ModelAndView();  mv.setViewName="success
  • WebService存在的必要性？ 一炮送你回车库 webservice
    做Java的经常在选择Webservice框架上徘徊很久，Axis  Xfire Axis2 CXF ，他们只有一个功能，发布HTTP服务然后用XML做数据传输。 是的，他们就做了两个功能，发布一个http服务让客户端或者浏览器连接，接收xml参数并发送xml结果。 当在不同的平台间传输数据时，就需要一个都能解析的数据格式。 但是为什么要使用xml呢？不能使json或者其他通用数据
  • js年份下拉框 3213213333332132 java web ee
    <div id="divValue">test...</div>测试 //年份 <select id="year"></select> <script type="text/javascript"> window.onload =
  • 简单链式调用的实现技术 归来朝歌 方法调用链式反应编程思想
    在编程中，我们可以经常遇到这样一种场景：一个实例不断调用它自身的方法，像一条链条一样进行调用 这样的调用你可能在Ajax中，在页面中添加标签： $("<p>").append($("<span>").text(list[i].name)).appendTo("#result");   也可能在HQ
  • JAVA调用.net 发布的webservice 接口 darkranger webservice
    /** * @Title: callInvoke * @Description: TODO(调用接口公共方法) * @param @param url 地址 * @param @param method 方法 * @param @param pama 参数 * @param @return * @param @throws BusinessException
  • Javascript模糊查找 | 第一章 循环不能不重视。 aijuans Way
    最近受我的朋友委托用js+HTML做一个像手册一样的程序，里面要有可展开的大纲，模糊查找等功能。我这个人说实在的懒，本来是不愿意的，但想起了父亲以前教我要给朋友搞好关系，再加上这也可以巩固自己的js技术，于是就开始开发这个程序，没想到却出了点小问题，我做的查找只能绝对查找。具体的js代码如下： function search(){ var arr=new Array("my
  • 狼和羊，该怎么抉择 atongyeye 工作
    狼和羊，该怎么抉择 在做一个链家的小项目，只有我和另外一个同事两个人负责，各负责一部分接口，我的接口写完，并全部测联调试通过。所以工作就剩下一下细枝末节的，工作就轻松很多。每天会帮另一个同事测试一些功能点，协助他完成一些业务型不强的工作。 今天早上到公司没多久，领导就在QQ上给我发信息，让我多协助同事测试，让我积极主动些，有点责任心等等，我听了这话，心里面立马凉半截，首先一个领导轻易说
  • 读取android系统的联系人拨号 百合不是茶 androidsqlite数据库内容提供者系统服务的使用
           联系人的姓名和号码是保存在不同的表中,不要一下子把号码查询来,我开始就是把姓名和电话同时查询出来的,导致系统非常的慢   关键代码:     1, 使用javabean操作存储读取到的数据 package com.example.bean; /** * * @author Admini
  • ORACLE自定义异常 bijian1013 数据库自定义异常
    实例： CREATE OR REPLACE PROCEDURE test_Exception ( ParameterA IN varchar2, ParameterB IN varchar2, ErrorCode OUT varchar2 --返回值,错误编码 ) AS /*以下是一些变量的定义*/ V1 NUMBER; V2 nvarc
  • 查看端号使用情况 征客丶 windows
    一、查看端口 在windows命令行窗口下执行： >netstat -aon|findstr "8080" 显示结果： TCP     127.0.0.1:80         0.0.0.0:0    &
  • 【Spark二十】运行Spark Streaming的NetworkWordCount实例 bit1129 wordcount
    Spark Streaming简介   NetworkWordCount代码   /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with
  • Struts2 与 SpringMVC的比较 BlueSkator struts2spring mvc
    1. 机制：spring mvc的入口是servlet，而struts2是filter，这样就导致了二者的机制不同。 2. 性能：spring会稍微比struts快。spring mvc是基于方法的设计，而sturts是基于类，每次发一次请求都会实例一个action，每个action都会被注入属性，而spring基于方法，粒度更细，但要小心把握像在servlet控制数据一样。spring
  • Hibernate在更新时，是可以不用session的update方法的(转帖） BreakingBad Hibernateupdate
    地址：http://blog.csdn.net/plpblue/article/details/9304459 public void synDevNameWithItil() {Session session = null;Transaction tr = null;try{session = HibernateUtil.getSession();tr = session.beginTran
  • 读《研磨设计模式》-代码笔记-观察者模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; import java.util.Observable; import java.util.Observer; /** * “观
  • 重置MySQL密码 chenhbc mysql重置密码忘记密码
    如果你也像我这么健忘，把MySQL的密码搞忘记了，经过下面几个步骤就可以重置了（以Windows为例，Linux/Unix类似）： 1、关闭MySQL服务 2、打开CMD，进入MySQL安装目录的bin目录下，以跳过权限检查的方式启动MySQL mysqld --skip-grant-tables  3、新开一个CMD窗口，进入MySQL mysql -uroot  
  • 再谈系统论，控制论和信息论 comsci 设计模式生物能源企业应用领域模型
                               再谈系统论，控制论和信息论     偶然看
  • oracle moving window size与 AWR retention period关系 daizj oracle
    转自： http://tomszrp.itpub.net/post/11835/494147 晚上在做11gR1的一个awrrpt报告时,顺便想调整一下AWR snapshot的保留时间,结果遇到了ORA-13541这样的错误.下面是这个问题的发生和解决过程. SQL> select * from v$version; BANNER -------------------
  • Python版B树 dieslrae python
    话说以前的树都用java写的,最近发现python有点生疏了,于是用python写了个B树实现,B树在索引领域用得还是蛮多了,如果没记错mysql的默认索引好像就是B树... 首先是数据实体对象,很简单,只存放key,value class Entity(object): '''数据实体''' def __init__(self,key,value)
  • C语言冒泡排序 dcj3sjt126com 算法
    代码示例： # include <stdio.h> //冒泡排序 void sort(int * a, int len) { int i, j, t; for (i=0; i<len-1; i++) { for (j=0; j<len-1-i; j++) { if (a[j] > a[j+1]) // >表示升序
  • 自定义导航栏样式 dcj3sjt126com 自定义
    -(void)setupAppAppearance { [[UILabel appearance] setFont:[UIFont fontWithName:@"FZLTHK—GBK1-0" size:20]]; [UIButton appearance].titleLabel.font =[UIFont fontWithName:@"FZLTH
  • 11.性能优化-优化-JVM参数总结 frank1234 jvm参数性能优化
    1.堆 -Xms --初始堆大小 -Xmx --最大堆大小 -Xmn --新生代大小 -Xss --线程栈大小 -XX:PermSize  --永久代初始大小 -XX:MaxPermSize  --永久代最大值 -XX:SurvivorRatio --新生代和suvivor比例,默认为8 -XX:TargetSurvivorRatio --survivor可使用
  • nginx日志分割 for linux HarborChung nginxlinux脚本
    nginx日志分割 for linux 默认情况下，nginx是不分割访问日志的，久而久之，网站的日志文件将会越来越大，占用空间不说，如果有问题要查看网站的日志的话，庞大的文件也将很难打开，于是便有了下面的脚本   使用方法，先将以下脚本保存为 cutlog.sh，放在/root 目录下，然后给予此脚本执行的权限   复制代码代码如下: chmo
  • Spring4新特性——泛型限定式依赖注入 jinnianshilongnian springspring4泛型式依赖注入
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • centOS安装GCC和G++ liuxihope centosgcc
    Centos支持yum安装，安装软件一般格式为yum install .......，注意安装时要先成为root用户。 按照这个思路，我想安装过程如下： 安装gcc：yum install gcc 安装g++： yum install g++ 实际操作过程发现，只能有gcc安装成功，而g++安装失败，提示g++ command not found。上网查了一下，正确安装应该
  • 第13章 Ajax进阶（上） onestopweb Ajax
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • How to determine BusinessObjects service pack and fix pack blueoxygen BO
    http://bukhantsov.org/2011/08/how-to-determine-businessobjects-service-pack-and-fix-pack/   The table below is helpful. Reference   BOE XI 3.x 12.0.0. y BOE XI 3.0 12.0. x. y BO
  • Oracle里的自增字段设置 tomcat_oracle oracle
    　大家都知道吧，这很坑，尤其是用惯了mysql里的自增字段设置，结果oracle里面没有的。oh，no 　　我用的是12c版本的，它有一个新特性，可以这样设置自增序列，在创建表是，把id设置为自增序列 create table t ( id 　　 　　 number generated by default as identity (start with 1 increment b
  • Spring Security（01）——初体验 yang_winnie springSecurity
    Spring Security（01）——初体验     博客分类： spring Security Spring Security入门安全认证        首先我们为Spring Security专门建立一个Spring的配置文件，该文件就专门用来作为Spring Security的配置
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他