原始代码:
<!doctype html> <!-- http://www.jb51.net/article/44354.htm --> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin:0; padding:0; } html { _background:url(about:blank); } /**//* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */ body { background:#fff; font: 12px/1.5 Tahoma, Geneva, \\5b8b\\4f53, sans-serif; height:100%; } .wrap { height:980px; padding-top:20px; text-align:center; } p { font-size:14px; text-align:center; line-height:24px; } /**//** 遮罩层 **/ #masklayer { background:#000; display:none; filter:alpha(opacity = 50); opacity:0.5; top:0; left:0; height:100%; width:100%; z-index:999; position:fixed; _position:absolute; _left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); _top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); } /**//** 弹出层 **/ #Div_popup { display:none; background-color:red; width:200px; z-index:1000; left:50%; top:50%; position:fixed!important; margin-left:-150px !important; _position:absolute; _top:expression(eval(document.compatMode && document.compatMode==‘CSS1Compat‘)? documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2: /**//*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /**//*IE5 IE5.5*/ } .content { background:#f3f3f3; border:1px solid #999; } .content h3 { background:#a0a0a0; color:#fff; font-size:14px; height:32px; line-height:32px; padding-left:5px; } #clickbtn { margin-top:20px; } #img_zfb{ width:100%; height:100%; } </style> </head> <body> <div class="wrap"> <p> 我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br /> 我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br /> 我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br /> 我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br /> 我是正文我是正文我是正文我是正文我是正文我是正文我是正文 </p> <input type="button" id="clickbtn" value="clike me" /> </div> <div id="masklayer"></div> <div id="Div_popup"> <img id="img_zfb" src="http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_12.png"> <p>居中居中居中居中居中居中</p> </div> <script type="text/javascript"> (function(masklayer){ var clickbtn = document.getElementById(‘clickbtn‘); clickbtn.onclick = function(){ var Div_popup = document.getElementById(‘Div_popup‘); masklayer.style.display=‘block‘; Div_popup.style.display =‘block‘; var h = Div_popup.clientHeight; with(Div_popup.style){ marginTop = -h/2+‘px‘; } } })(document.getElementById(‘masklayer‘)) </script> </body> </html>
博客园测试代码:
备份css代码
*{ margin:0px; padding:0px; } html{height:100%} .zhezhao{ width:100%; height:12000px; background-color:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; position:absolute; left:0px; top:0px; display:none; z-index:1000; } .div_zfb{ width:80px; height:80px; position:absolute; top:200px; left:50%; background-color:#fff; margin-left:-140px; display:none; z-index:1500; text-align:center; } .custom_hide{ display: none; } .mid{ width:230px; font: 12px black Verdana,Arial,Helvetica,sans-serif; margin:0px auto; text-align:center; } #img_zfb{ width:230px; height:230px; } /*签名*/ .autograph { padding: 15px; background-color: #FFF7DC; border: 2px solid #FFBFBF; font-family:"Courier New", 微软雅黑, Consolas, Arial, 宋体; } .custom_hide{ display: none; } .blogds{height:82px;line-height:82px;} a.btn_donate{display: inline-block;width: 82px;height: 82px; background: url("http://files.cnblogs.com/files/yanweidie/btn_reward.gif") no-repeat; _background: url("http://files.cnblogs.com/files/yanweidie/btn_reward.gif") no-repeat; -webkit-transition: background 0s;-moz-transition: background 0s; -o-transition: background 0s;-ms-transition: background 0s;transition: background 0s;} a.btn_donate:hover{cursor:hand; background-position: 0px -82px;background-color:unset !important;} .bold{ font-weight: bold; } /*回到顶部*/ #rocket-to-top div{left:0;margin:0;overflow:hidden;padding:0;position:absolute;top:0;width:149px;} #rocket-to-top .level-2{background:url("http://images2015.cnblogs.com/blog/336693/201609/336693-20160929114645844-1059340274.png") no-repeat scroll -149px 0 transparent;display:none;height:250px;opacity:0;z-index:1;} #rocket-to-top .level-3{background:none repeat scroll 0 0 transparent;cursor:pointer;display:block;height:150px;z-index:2;} #rocket-to-top{background:url("http://images2015.cnblogs.com/blog/336693/201609/336693-20160929114645844-1059340274.png") no-repeat scroll 0 0 transparent;cursor:default;display:block;height:250px;margin:-125px 0 0;overflow:hidden;padding:0;position:fixed;right:0;top:80%;width:149px;z-index:11;}
备份签名代码
<script type="text/javascript"> window.onload=function(){ var bt=document.getElementById("btn_donate"); var zhezhao=document.getElementById("zhezhao"); var login=document.getElementById("div_zfb"); zhezhao.onclick=function(){ zhezhao.style.display="none"; login.style.display="none"; document.body.style.height=""; document.body.style.overflow=""; } bt.onclick=function(){ zhezhao.style.display="block"; zhezhao.style.height="100%"; login.style.display="block"; login.style.top=(document.documentElement.clientHeight + 330) + "px"; alert(document.documentElement.scrollTop) document.body.style.height="100%"; //document.body.style.overflow="hidden"; } } </script> <!-- 支付宝遮罩 --> <div class="zhezhao" id="zhezhao"></div> <div class="div_zfb" id="div_zfb"><img id="img_zfb" src="http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_12.png"><br> <div class="mid">1321321</div></div> <img id="t_zfb" width="100px" height="100px" src="http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_12.png"> <!-- 签名 --> <div class="autograph"> <p> <span style="display: none"> 如果,您认为阅读这篇博客让您有些收获,不妨点击一下右下角的<a id="btnRecommendMyBlog">【<strong>推荐</strong>】</a>按钮。<br> </span> 如果,您希望更容易地发现我的新博客,不妨点击一下绿色通道的<a>【<strong>关注我</strong>】</a>。</p> <div class="blogds">如果,想给予我更多的鼓励,<span class="bold">求打</span> <a class="btn_donate" style="position: absolute" id="btn_donate" title="Donate 打赏" target="_self"></a> </div> <p>因为,我的写作热情也离不开您的肯定支持。</p> <p>感谢您的阅读,如果您对我的博客所讲述的内容有兴趣,请继续关注我的后续博客,我是焰尾迭 。</p> </div> <!-- 火箭 --> <div id="rocket-to-top"> <div class="level-2" style="opacity: 0; display: block;"></div> <div class="level-3"></div> </div>
测试页面代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>在web.config中配置httpHandlers节点是的说明 - jack_Meng - 博客园</title> <link type="text/css" rel="stylesheet" href="/bundles/blog-common.css?v=m_FXmwz3wxZoecUwNEK23PAzc-j9vbX_C6MblJ5ouMc1"/> <link id="MainCss" type="text/css" rel="stylesheet" href="/skins/AnotherEon001/bundle-AnotherEon001.css?v=dNz80TfH9-81kuLR86t4JWgT2tb_J0B779DQM4kw0WU1"/> <link type="text/css" rel="stylesheet" href="/blog/customcss/121128.css?v=gKs85g3vThFyo6m7DQF10MQseCY%3d"/> <link id="mobile-style" media="only screen and (max-width: 768px)" type="text/css" rel="stylesheet" href="/skins/AnotherEon001/bundle-AnotherEon001-mobile.css?v=e_QVfUeTMKJaQaYv1olAXHEIJXw3W1tp4SPxjnummuY1"/> <link title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/mq0036/rss"/> <link title="RSD" type="application/rsd+xml" rel="EditURI" href="http://www.cnblogs.com/mq0036/rsd.xml"/> <link type="application/wlwmanifest+xml" rel="wlwmanifest" href="http://www.cnblogs.com/mq0036/wlwmanifest.xml"/> <script src="//common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script type="text/javascript">var currentBlogApp = ‘mq0036‘, cb_enable_mathjax=false;var isLogined=false;</script> <script src="/bundles/blog-common.js?v=E1-LyrzANB2jbN9omtnpOHx3eU0Kt3DyislfhU0b5p81" type="text/javascript"></script> </head> <style type="text/css"> * { margin:0; padding:0; } html { _background:url(about:blank); } /**//* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */ body { background:#fff; font: 12px/1.5 Tahoma, Geneva, \\5b8b\\4f53, sans-serif; height:100%; } .custom_hide { display: none; } p { font-size:14px; text-align:center; line-height:24px; } /**//** 遮罩层 **/ #masklayer { background:#000; display:none; filter:alpha(opacity = 50); opacity:0.5; top:0; left:0; height:100%; width:100%; z-index:999; position:fixed; _position:absolute; _left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); _top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); } /**//** 弹出层 **/ #Div_popup { display:none; background-color:red; width:200px; z-index:1000; left:50%; top:50%; position:fixed!important; margin-left:-150px !important; _position:absolute; _top:expression(eval(document.compatMode && document.compatMode==‘CSS1Compat‘)? documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2: /**//*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /**//*IE5 IE5.5*/ } /*图片样式*/ #img_zfb { width:100%; height:100%; } /*签名*/ .autograph { padding: 15px; background-color: #FFF7DC; border: 2px solid #FFBFBF; font-family:"Courier New", 微软雅黑, Consolas, Arial, 宋体; } .custom_hide { display: none; } .blogds { height:82px; line-height:82px; } a.btn_donate { display: inline-block; width: 82px; height: 82px; background: url("http://files.cnblogs.com/files/yanweidie/btn_reward.gif") no-repeat; _background: url("http://files.cnblogs.com/files/yanweidie/btn_reward.gif") no-repeat; -webkit-transition: background 0s; -moz-transition: background 0s; -o-transition: background 0s; -ms-transition: background 0s; transition: background 0s; } a.btn_donate:hover { cursor:hand; background-position: 0px -82px; background-color:unset !important; } .bold { font-weight: bold; } /*回到顶部*/ #rocket-to-top div { left:0; margin:0; overflow:hidden; padding:0; position:absolute; top:0; width:149px; } #rocket-to-top .level-2 { background:url("http://images2015.cnblogs.com/blog/336693/201609/336693-20160929114645844-1059340274.png") no-repeat scroll -149px 0 transparent; display:none; height:250px; opacity:0; z-index:1; } #rocket-to-top .level-3 { background:none repeat scroll 0 0 transparent; cursor:pointer; display:block; height:150px; z-index:2; } #rocket-to-top { background:url("http://images2015.cnblogs.com/blog/336693/201609/336693-20160929114645844-1059340274.png") no-repeat scroll 0 0 transparent; cursor:default; display:block; height:250px; margin:-125px 0 0; overflow:hidden; padding:0; position:fixed; right:0; top:80%; width:149px; z-index:11; } </style> <script type="text/javascript"> window.onload=function(){ var bt=document.getElementById("btn_donate"); var zhezhao=document.getElementById("masklayer"); (function initMask() { var masklayer = document.getElementById(‘masklayer‘); var clickbtn = document.getElementById(‘btn_donate‘); var divImg=document.getElementById("Div_popup"); clickbtn.onclick = function() { var Div_popup = document.getElementById(‘Div_popup‘); masklayer.style.display=‘block‘; Div_popup.style.display =‘block‘; var h = Div_popup.clientHeight; with(Div_popup.style) { marginTop = -h/2+‘px‘; } } masklayer.onclick=function(){ masklayer.style.display="none"; divImg.style.display="none"; //document.body.style.height=""; //document.body.style.overflow=""; } })() } </script> <body> <a name="top"></a> <div id="wrapper"> <div id="header"> <div id="top"> <h1><a id="Header1_HeaderTitle" class="headermaintitle" href="http://www.cnblogs.com/mq0036/">jack_Meng</a></h1> <div id="subtitle"></div> </div> <div id="sub"> <div id="blog_stats"> <div class="BlogStats">随笔 - 775, 文章 - 1, 评论 - 111, 引用 - 0</div> </div> </div> </div> <div id="main_container"> <div id="main_content"> <div id="content"> <div id="post_detail"> <div class="post"> <h2> <a id="cb_post_title_url" href="http://www.cnblogs.com/mq0036/p/7018612.html">在web.config中配置httpHandlers节点是的说明</a> </h2> <div class="postbody"> <div id="cnblogs_post_body"> <div class="cnblogs_code"> <pre><system.web> <httpHandlers> <add verb=<span style="color: #800000;">"</span><span style="color: #800000;">*</span><span style="color: #800000;">"</span> path=<span style="color: #800000;">"</span><span style="color: #800000;">*.lcj</span><span style="color: #800000;">"</span> type=<span style="color: #800000;">"</span><span style="color: #800000;">WebHttpHandler.MyHandler</span><span style="color: #800000;">"</span> /> </httpHandlers><span style="color: #000000;"> .......... </span></system.web> </pre> </div> <p> </p> <p>说明如下:<br /> verb可以是“POST”或 “GET”,表示对GET或POST的请求进行处理。“*”表示对所有的请求进行处理。<br /> <br /> path指明相对应的文件进行处理,"*.aspx" 表示对发给所有的ASPX页面的请求进行处理,也可以指明路径,<br /> 如,“/test/*.aspx” 表明只对test目录下的aspx文件进行处理。<br /> <br /> type属性中,指明要进行处理的类名,但是这个类名一定要继承IHttpHandler这个接口。</p> <p>例子中WebHttpHandler指的是名称空间,MyHandler指的是继承IHttpHandler这个接口的类。</p> <p> </p> <p>HttpHandler:</p> <p>HttpHandler是HTTP请求的处理中心,真正地对客户端请求的服务器页面做出编译和执行,并将处理过后的信息附加在HTTP请求信息流中再次返回到HttpModule中。<br /> HttpHandler与HttpModule不同,一旦定义了自己的HttpHandler类,那么它对系统的HttpHandler的关系将是“覆盖”关系。</p> <p>IHttpHandler接口声明:</p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">interface</span><span style="color: #000000;"> IHttpHandler { </span><span style="color: #0000ff;">bool</span> IsReusable { <span style="color: #0000ff;">get</span><span style="color: #000000;">; } </span><span style="color: #0000ff;">public</span> <span style="color: #0000ff;">void</span> ProcessRequest(HttpContext context); <span style="color: #008000;">//</span><span style="color: #008000;">请求处理函数 </span> } </pre> </div> <p> </p> <p>出处:http://blog.csdn.net/joyhen/article/details/8747509</p> </div> <div id="MySignature" style="display: block;"> <!-- 支付宝遮罩 --> <div id="masklayer"></div> <div id="Div_popup"> <img id="img_zfb" src="http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_12.png"> <p>您的资助是我最大的动力!金额随意,欢迎来赏!</p> <!-- 欢迎资助我持续写作,金额随意,欢迎来赏! --> </div> <!-- 签名 --> <div class="autograph"> <p> <span style="display: none"> 如果,您认为阅读这篇博客让您有些收获,不妨点击一下右下角的<a id="btnRecommendMyBlog">【<strong>推荐</strong>】</a>按钮。<br> </span> 如果,您希望更容易地发现我的新博客,不妨点击一下绿色通道的<a>【<strong>关注我</strong>】</a>。</p> <div class="blogds">如果,想给予我更多的鼓励,<span class="bold">求打</span> <a class="btn_donate" style="position: absolute" id="btn_donate" title="Donate 打赏" target="_self"></a> </div> <p>因为,我的写作热情也离不开您的肯定支持。</p> <p>感谢您的阅读,如果您对我的博客所讲述的内容有兴趣,请继续关注我的后续博客,我是焰尾迭 。</p> </div> <!-- 火箭 --> <div id="rocket-to-top"> <div class="level-2" style="opacity: 0; display: block;"></div> <div class="level-3"></div> </div> </div> <div class="clear"></div> <div id="blog_post_info_block"> <div id="BlogPostCategory"></div> <div id="EntryTag"></div> <div id="blog_post_info"> </div> <div class="clear"></div> <div id="post_next_prev"></div> </div> </div> <p class="postfoot"> posted on <span id="post-date">2017-06-15 16:37</span> <a href=‘http://www.cnblogs.com/mq0036/‘>jack_Meng</a> 阅读(<span id="post_view_count">...</span>) 评论(<span id="post_comment_count">...</span>) <a href ="https://i.cnblogs.com/EditPosts.aspx?postid=7018612" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(7018612);return false;">收藏</a> </p> </div> <script type="text/javascript">var allowComments=true,cb_blogId=121128,cb_entryId=7018612,cb_blogApp=currentBlogApp,cb_blogUserGuid=‘33513f9f-ba13-e011-ac81-842b2b196315‘,cb_entryCreatedDate=‘2017/6/15 16:37:00‘;loadViewCount(cb_entryId);</script> </div> <a name="!comments"></a> <div id="blog-comments-placeholder"></div> <script type="text/javascript">var commentManager = new blogCommentManager();commentManager.renderComments(0);</script> <div id=‘comment_form‘ class=‘commentform‘> <a name=‘commentform‘></a> <div id=‘divCommentShow‘></div> <div id=‘comment_nav‘><span id=‘span_refresh_tips‘></span><a href=‘javascript:void(0);‘ onclick=‘return RefreshCommentList();‘ id=‘lnk_RefreshComments‘ runat=‘server‘ clientidmode=‘Static‘>刷新评论</a><a href=‘#‘ onclick=‘return RefreshPage();‘>刷新页面</a><a href=‘#top‘>返回顶部</a></div> <div id=‘comment_form_container‘></div> <div class=‘ad_text_commentbox‘ id=‘ad_text_under_commentbox‘></div> <div id=‘ad_t2‘></div> <div id=‘opt_under_post‘></div> <div id=‘cnblogs_c1‘ class=‘c_ad_block‘></div> <div id=‘under_post_news‘></div> <div id=‘cnblogs_c2‘ class=‘c_ad_block‘></div> <div id=‘under_post_kb‘></div> <div id=‘HistoryToday‘ class=‘c_ad_block‘></div> <script type=‘text/javascript‘> fixPostBody(); setTimeout(function () { incrementViewCount(cb_entryId); }, 50); deliverAdT2(); deliverAdC1(); deliverAdC2(); loadNewsAndKb(); loadBlogSignature(); LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid); GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate); loadOptUnderPost(); GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate); </script> </div> </div> </div> <div id="leftmenu"> <h3>导航</h3> <ul> <li> <a id="blog_nav_sitehome" href="http://www.cnblogs.com/">博客园</a></li> <li> <a id="blog_nav_myhome" class="two_words" href="http://www.cnblogs.com/mq0036/">首页</a></li> <li> <a id="blog_nav_newpost" rel="nofollow" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">新随笔</a></li> <li> <a id="blog_nav_contact" accesskey="9" class="two_words" rel="nofollow" href="https://msg.cnblogs.com/send/jack_Meng">联系</a></li> <li> <a id="blog_nav_rss" class="two_words" href="http://www.cnblogs.com/mq0036/rss">订阅</a> <a id="blog_nav_rss_image" href="http://www.cnblogs.com/mq0036/rss"><img src="//www.cnblogs.com/images/xml.gif" alt="订阅" /></a> </li> <li> <a id="blog_nav_admin" class="two_words" rel="nofollow" href="https://i.cnblogs.com/">管理</a></li> </ul> <div id="blog-calendar" style="display:none"></div> <script type="text/javascript">loadBlogDefaultCalendar();</script> <meta name="vs_showGrid" content="False"> <h3>公告</h3> <div id="blog-news"></div> <script type="text/javascript">loadBlogNews();</script> <div id="blog-sidecolumn"></div> <script type="text/javascript">loadBlogSideColumn();</script> </div> </div> <div class="clear"></div> <div id="footer"> <p id="footer"> Powered by: <br /> <a id="Footer1_Hyperlink3" NAME="Hyperlink1" href="http://www.cnblogs.com/" style="font-family:Verdana;font-size:12px;">博客园</a> <br /> Copyright © jack_Meng </p> </div> </div> </body> </html>
参考出处:
时间: 2024-08-25 21:47:18