利用CSS,尝试做了一个仿Windows窗口的横向纵向均居中的Div效果:
以下是完整源代码:
<!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/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>动易远程接口中转</title> <style type="text/css"> <!-- body {margin:0px;background:#ccc;height:auto;font: 9pt Tahoma;text-align:center;color: #000;} #outbox {position:absolute;z-index:888;top:50%;left:50%;margin:-120px 0 0 -200px;width:400px;height:auto;background:#D4D0C8;border:1px solid #ccc;} #title,#body,#bottom {border-top:1px solid #ddd;border-bottom:1px solid #999;border-right:1px solid #999;border-left:1px solid #ddd;}#title {line-height:28px;background:#c4c0c8;} #body {height:150px;text-align:left;padding:10px 10px;} #bottom {height:30px;padding:2px} #input {top:0px;bottom:0px;} --> </style> </head> <body> <div id="outbox"> <div id="title">正在进行通行证操作</div> <div id="body"> <p>正在进行远程数据同步,请勿刷新页面!</p> <ul> <li id="api">论坛数据同步中</li> <li id="powereasy">本站操作已完成!</li> </ul> </div> <div id="bottom"> <input onclick="location.href='index.asp'" id="confirm" type="button" value="点击返回" style="display:none" /> </div> </div> <script type="text/javascript" language="JavaScript"> document.getElementById("api").innerHTML = "通行证操作成功!"; document.getElementById("confirm").removeAttribute("style");</script> </body> </html>
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
我来说两句