先上代码：
1、先新建一个文本文档
2、双击打开，把上面代码复制进去
3、保存并退出，选择重命名，把后缀改成.html，如果出现警告，选是
Tips：不会改后缀的看后面
如何改后缀1、先打开任意一个文件夹，点击查看
2、把后面“文件扩展名”勾选上就可以
html 请假条恶搞
访客
目录代码步骤如何改后缀代码<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>请假条</title> <style> html,body{ margin:0; padding:0; background:#f2f1f6; } .container{ position:relative; width:500px; height:300px; background:#f2f1f6; } .containerh1{ margin-top:0; text-align:center; } .containerimg{ vertical-align:-70px; } .bd{ padding-left:30px; } .ft{ position:absolute; width:100%; bottom:20px; padding:030px; line-height:30px; box-sizing:border-box; } .btn-group{ float:left; } .fr{ float:right; } button{ cursor:pointer; } #p1{ } .not-allow{ position:relative; } #p2{ display:none; } .red{ margin:0; font-size:24px; padding:30px40px; color:red; letter-spacing:4px; } .wavy{ text-decoration:underline; text-decoration-style:wavy; } .name{ padding-left:10px; } .btn{ padding:6px12px; } </style> </head> <body> <divclass="container"> <divid="p1"> <h1>请假条</h1> <divclass="bd"> 尊敬的老师:<imgsrc="https://p.qqan.com/up/2021-1/16100050925828871.jpg"width="120"/> </div> <divclass="ft"> <divclass="btn-group"> <buttonclass="btnallow">同意</button> <buttonclass="btnnot-allow"id="not-allow">不同意</button> </div> <divclass="fr"> 请假人:<spanclass="name">这里改成自己的名字</span> </div> </div> </div> <divid="p2"> <h2class="red"> 老师大人,我这就回家</span>明天再见！。<br/><!--这里可以自己写--> !!!!再贱!!!! </h2> <divclass="ft"> <buttonclass="btnfrexit">退出</button> </div> </div> </div> <script> (function(){ function$(selector){ returndocument.querySelector(selector); } var$p1=document.getElementById('p1'); var$p2=document.getElementById('p2'); var$container=$('.container'); var$btn=$('#not-allow'); varisBlockClose=true; varmaxX=$container.clientWidth-1,maxY=$container.clientHeight-1; varoriginPos=$btn.getBoundingClientRect(); $('.allow').addEventListener('click',function(){ $p1.style.display='none'; $p2.style.display='block'; }); $btn.addEventListener('mouSEO（(SearchEngineOptimization)）ver',function(){ this.style.left=Math.floor(Math.random()*maxX-originPos.left)'px'; this.style.top=Math.floor(Math.random()*maxY-originPos.top)'px'; //console.log(this.style.left,this.style.top); }); $('.exit').addEventListener('click',function(){ isBlockClose=false; window.close(); }); window.addEventListener('beforeunload',function(e){ if(isBlockClose){ alert("此路不通"); e.returnValue=false; e.preventDefault(); return"此路不通"; } }); })(); </script> </body> </html> 步骤