CSS学习笔记(六)

shuxiang

浏览: 28450 次
性别:
来自: 珠海

最近访客更多访客>>

shaogx

c04s31602

AlexTing

sjt2015

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS jQuery JavaScript IE 浏览器

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script src="jquery-1.3.2.min.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            $(function(){
				//点击显示遮蔽层并动态设置遮蔽层的高度
				$("button").click(function(){
					$("#overlayer").css("display","block").height($(document).height());
				});
            });
        </script>
        <style type="text/css">
            body {
                margin: 0; /*除去body和浏览器之间的间距*/
/*
				height:100%;
*/
            }
            
            #overlayer {
                background-color: #000000;
				/* 百分之百是指父容器高度的百分之百， 
				 * 所以在IE中如果没有指定body的父容器的高度，
				 * 则子元素的100%只是一个默认的高度,但FF却不会
				 * FF中会显示当前浏览的高度，为了适应内容 的高度，
				 * 在这里动态设置高度。
				 * */
                height: 100%;
                opacity: 0.7;
                *filter: alpha(opacity = 70);
                position: absolute;
                width:100%;
                z-index:3;
				/*初始不显示遮蔽层*/
				display:none;
            }
            
            #container {
                width: 100%;
                background: red;
				height:1000px;
            }
        </style>
    </head>
    <body>
        <div id="overlayer">
        </div>
        <div id="container">
        	<button>试试</button>
        </div>
    </body>
</html>

效果：