打开网页1秒之后弹出屏幕居中的浮动层
2014-04-01 20:31:34   来源:   评论:0 点击:

<!DOCTYPE html><html xmlns="http: www w3 org 1999 xhtml"><head><meta http-equiv="Content-Type" content="text html; charset=u
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打开网页1秒之后弹出屏幕居中的浮动层</title>
<style type="text/css">
body{ margin:0; padding:0;}
#box{width:500px;height:250px; background:#666; border:2px solid #CCC; position:absolute;left:50%;top:50%; margin:-125px 0 0 -250px; z-index:150;display:none;}
#box p{padding:0 10px;margin-top:10px;}
#box span{color:#ff0;padding-left:5px;}
#box h2{ margin:0;height:25px;cursor:move;background:#222;border-bottom:2px solid #ccc;text-align:right;padding:0 10px;}
#box h2 a{color:#fff;font:12px/25px Arial;text-decoration:none;outline:none;}
</style>
<script type="text/javascript">
window.onload=function()
{
setTimeout(function()
{
level();
},1000);
};
function level()
{
var oBox=document.getElementById('box');
var oH2=oBox.getElementsByTagName('h2')[0];
oBox.style.display='block';
oH2.onclick=function()
{
oBox.style.display='none';
};
}
</script>
</head>
<body>
<div id="box">
<h2><a href="javascript:;">X</a></h2>
欢迎访问php114 (www.php114.net)
</div>
</body>
</html><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.php114.net/' target='_blank'>http://www.php114.net/</a></center>
责任编辑:eagle

相关热词搜索:

上一篇:纯DIV+CSS(无图片)实现圆角
下一篇:CSS实现鼠标移动到图片,更换图片

相关推荐