您的位置：首页 > Web前端 > CSS

Web_CSS_DIV相对浏览器定位及其关闭；

2014-03-03 13:48 441 查看

功能：DIV相对浏览器定位及其关闭。

>html源码

<html>
<head>
<title>hello</title>
<style tyle="text/css">
html,body {
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow:hidden;	//溢出隐藏；解决IE8滚动条问题；
}

#Main {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;	//能显示完所有内容；
z-index:1;
}

.floatDiv {
position:absolute;
top:50px;
right:30px;
padding: 3 3 3 3;
background:#ccc;
text-align:right;
z-index:2;
}

.close {
background-color:#CC6600;
cursor: pointer;
color: #FFFFFF;
}
</style>
<script type="text/javascript" src="hello.js"></script>
</head>

<body>
<div id="Main">
First,hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
hello,world!<br />
last,hello,world!<br />
</div>
<div id="fDiv" class="floatDiv">
<div><span id="closeBtn" class="close">关闭</span></div>
<img src="img/sleep.jpg" width="200" height="150" />
</div>
</body>
</html>

>js源码

window.onload = initFn;

function initFn() {
// 关闭按钮
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function(){
// 浮动DIV
var floatDiv = document.getElementById("fDiv");
floatDiv.style.display	= 'none';		//不显示；
}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航