巧用 div 层次和巧用百分比

来源：互联网发布：哥们傲剑数据编辑：程序博客网时间：2024/06/10 08:27

在第一学期中做的毕业设计时，登录页面的登录框我是用PS直接做一个框架在背景图上的但由于是附在背景上的所以当屏幕分辨率改变时之前定位的表单就自然而然的脱离了之前设计好的那个背景中的登录框的那个位置。

基于这个问题，于是我打算把表单存放在一个 div 中然后让div 自适窗口大小

全部代码如下：

<body ><div id="beijintu"  style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0; min-width:500px; min-height:320px;">      <img src="dlym.jpg" style="left:0; top:0;" width="100%" height="100%">      </div> <div class="clear"></div><div id="denglukuan"  style="position: absolute; height:40%; width: 30%; top:0px; left:0px;  background-color: #999; border-radius: 10px;opacity:0.3;  margin-left:33%; margin-top:10%; min-width:250px; min-height:160px; "> </div></body>

【巧用层次】由于要考虑不同分辨率大小的显示器所以背景图要自适应大小于是我用一个绝对定位的div 来存放图片用来充当自适应的背景图代码如下：

<div id="beijintu" style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0; min-width:500px; min-height:320px;">      <img src="dlym.jpg" style="left:0; top:0;" width="100%" height="100%">       </div>

在这个div中我把它弄成绝对定位的宽和高都设置为百分百，使在不论如何拖动窗口的时候，背景图总是填充满整个浏览器距离边框像素为0，使得图片与浏览器之间不存在白边然后用 div层次顺序【z-index：-1 】让这个div 的层次为-1层就比默认的层次0 还要小就在所有为赋予值的div 中这个div 永远显示在最底层确保让它作为背景。

【巧用百分比】由于要适应不同分辨率的屏幕和适应用户的拉动因此要让界面在不论用户怎么拉动的情况下都能看到完整的背景图和完整的登录框。

在没有固定背景图和登录框的最小宽度时但拉动窗口让窗口小化是往往会出现背景图没有登录框大的情况如图：

这样就造成了极大的不美化。

于是就想出了一个办法。

<div id="denglukuan"  style="position: absolute; <span style="color:#FF0000;">height:40%; width: 30%;</span> top:0px; left:0px;  background-color: #999; border-radius: 10px;opacity:0.3;  margin-left:33%; margin-top:10%; min-width:250px; min-height:160px; ">

先在登录框这里设置登录框外部div的大小为整体的百分比这样有利于适应所以分辨率的屏幕避免设置固定的值造成尴尬。

但如果只是如此？如果有人恶意把窗口无限小化呢？那么登录框不就没有了？是的，如果仅是如此遇到窗口无限小化就呵呵了。于是要给登录框的div 一个最小值。保证登录框的最小可见度。

但但但，又出现了上面提到的问题登录框旁边留空。怎么办？简单啊，给背景div 也给他一个最小值就可以啊

但有人无聊到把窗口变小然后无聊的拉动滚动条的时候发现妈的一点影响都没有自找无趣自然会乖乖的把窗口正常化的。

0 0

巧用 div 层次 和 巧用百分比

巧用 div 层次和巧用百分比