巧用 div 层次和巧用百分比

最新推荐文章于 2024-08-18 10:28:23 发布

2b0x

最新推荐文章于 2024-08-18 10:28:23 发布

阅读量843

点赞数

分类专栏：学习记录 HTML+CSS 文章标签：背景大小自适应

本文链接：https://blog.csdn.net/soularbiter/article/details/50692798

版权

本文介绍了如何解决登录框在不同分辨率下定位问题，通过将表单放入div并利用百分比实现自适应窗口大小。背景图通过绝对定位的div实现自适应，同时确保登录框在窗口最小化时仍保持最小可见度，防止界面不美观。通过设置背景div和登录框div的最小宽度，解决了窗口无限小化和拉动滚动条时的显示问题。

摘要由CSDN通过智能技术生成

在第一学期中做的毕业设计时，登录页面的登录框我是用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>