使用div+css实现图片背景居中登录页面

DOC文件

3星 · 超过75%的资源 | 下载需积分: 50 | 75KB | 更新于2024-09-11 | 190 浏览量 | 4 评论 | 举报 1 收藏

立即下载

"该资源提供了一种使用JSP、HTML、CSS技术来创建居中显示且带有背景图片的登录页面的方法。重点在于利用div布局和CSS样式实现页面元素的定位和背景图片的居中，同时提供了关键代码示例。" 在创建具有个性化背景的登录页面时，通常会要求页面中的登录窗口居中显示，并在背景图片上添加输入框和按钮。这个描述介绍了一种基于`div+css`的方法来实现这一目标。以下是实现这一效果的关键步骤： 1. **图片背景处理**：首先，你需要对背景图片进行处理，使其具有透明区域。这通常可以通过图像编辑软件如Photoshop来完成，以便后续将登录表单元素放置在图片的特定位置。 2. **图片div的样式设置**：创建一个id为`imgcenter`的div，设置其`position`属性为`absolute`，以实现层的浮动。`top`和`left`分别设置为50%，使div相对于其父元素居中。接着，设定`width`和`height`以适应图片尺寸，并通过负的`margin-top`和`margin-left`值（分别是div高度和宽度的一半）来确保图片内容居中。最后，使用`background`属性设置背景图片，`background-repeat:no-repeat`防止图片平铺。 3. **form输入元素的添加**：创建一个id为`divcenter`的div，同样设置为`position:absolute`，并将其放置在图片div的上方。调整`top`、`left`、`width`、`height`以及`margin`属性，使登录表单居中。这个div将包含所有登录表单元素，如用户名和密码输入框以及登录按钮。代码示例中，还包含了引入了外部JavaScript文件`jQuery.md5.js`，这可能用于处理密码的MD5加密，以增强安全性。此外，`<%@include file="/framework/basic.jsp"%>`可能包含了基础的页面头部信息，如CSS和JavaScript库的引用，以及可能的全局变量定义。整个页面的结构大致如下： ```html <!DOCTYPE html> <html> <head>  <%@include file="/framework/basic.jsp"%> <style> /* CSS样式 */ </style> </head> <body> <div id="imgcenter"> <div id="divcenter">  <form>  <input type="text" name="username">  <input type="password" name="password">  <button type="submit">登录</button> </form> </div> </div>  <script src="<%=basePath%>js/ekyb/jQuery.md5.js"></script> </body> </html> ``` 这个设计的优点是它能自适应不同的屏幕分辨率，确保登录窗口始终居中，而且背景图片也会随着页面大小的变化而相应调整。通过调整div的尺寸和位置，可以轻松地改变登录表单的外观和位置，以适应不同设计的需求。