.mypage打破传统html文档结构

来源：互联网发布：请大家悉知是什么意思编辑：程序博客网时间：2024/05/21 12:59

html文档是xml文档的一种，所以必须规定有一个根节点，这个根节点你可以理解为<html>或<body>，而其他节点你就必须定义在body内。但我们如果换个角度，屏蔽掉<html>和<body>，让多个并列的节点看起来像处在根节点的位置，这样也许我们会有惊奇的发现。看下面的代码：

<!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>mypage</title>
<style type="text/css">
*{ margin:0; padding:0;}
html,body{ /*屏蔽html和body,通过这样我们可以视html，body不见，而.mypage的父元素如果说有的活不妨理解成window窗体*/
height:100%;
width:100%;
overflow:hidden;
}
.mypage{ /*用来模拟body，把页面的主要内容放进去；overflow:auto用来替代body或html的滚动条*/
height:100%;
overflow:auto;
width:100%;
position:absolute;
}
#fixP{ /*模拟固定定位，可以通过z-index调整它和.mypage的显示层次*/
position:absolute;
left:0;
top:0;
width:270px;
height:129px;
z-index:2;
background:#ccc;
}

#cover{/*半透明全屏蒙层*/
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:#000;
opacity:0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=70)";
*filter:alpha(opacity=70);
display:none;
z-index:99;
}
a{
color:#fff;
}
</style>
</head>
<body>
<div id="cover"><a href="#" onclick="document.getElementById('cover').style.display='none'">关闭</a></div>
<div id="fixP">拖动滚动条，我不动哦</div>
<div class="mypage">
<div style="height:2000px; width:100px; background:#666; padding-top:300px;">
<a href="#" onclick="document.getElementById('cover').style.display='block'">打开半透明层</a>
</div>
</div>
</body>
</html>

上面的方法相对完美的解决的固定定位和全屏屏蔽的问题，发散我们的思维吧，看看它还能解决什么问题。