CSS:模拟Windows窗口及DIV居中

时间:2022-05-02
本文章向大家介绍CSS:模拟Windows窗口及DIV居中，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

　　利用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>

随机文章
WEB前端知识点必读
最近更新