专栏首页PHP 开发CSS:模拟Windows窗口及DIV居中

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webkit中BFC元素临近浮动元素时的边距bug

    一直以来我们都很熟悉IE的“浮动边距加倍”的bug,并且绝大多数重构人员都已经很擅长在需要浮动时就直接绕过他。其实以webkit为核心的浏览器,包括但不限于Sa...

    小李刀刀
  • Spiral: 性能卓越的PHP/Golang混合开发框架

    春节期间,了解到一个“全新”的 WEB 开发框架:Spiral, 最开始引起我的兴趣是从同事那里听说了 RoadRunner. 然后去了解 RoadRunner...

    小李刀刀
  • 简单、通用的JQuery Tab实现

    网页上的空间是寸土寸金,虽然显示器的分辨率越来越大,可是直到今天,网页设计中仍然是以至少1024×768 像素的支持为主,也就是说,每一屏页面只有区区 955×...

    小李刀刀
  • 前端面试经典问题:CSS中居中的几种方式

    作为面试常客,学会这些,面试多点把握,同学间逼格升高 周五,老大说他面试了一个问题,是css居中的问题,然后我们在这边就讨论了一番,周末嗨玩,尾巴上想起这件事,...

    用户1667431
  • 手写一个HTML密码登录页面

    AngelNH
  • 自定义按钮~自适应布局~常见bug

    超然
  • css实现悬浮效果的阴影

    王小婷
  • 骚气的置顶

    简单、
  • CSS垂直居中的七个方法

    我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto;或是text-align:center;...

    coder_koala
  • CSS 3.0实现卡片悬停立体特效

    越陌度阡

扫码关注云+社区

领取腾讯云代金券