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

3星 · 超过75%的资源需积分: 50 146 浏览量更新于2024-09-11 1 收藏 75KB DOC 举报

"该资源提供了一种使用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的尺寸和位置，可以轻松地改变登录表单的外观和位置，以适应不同设计的需求。

在制作一些个性化的登录页面时，一般需要如下需求

登录页面居中，背景显示个性化的图片，下面的文本框输入相应的用户名与密码，点击登

录，然后跳转至相应的界面。如此，按以下操作可实现（作者亲自整理并采用一种方式实

现）：

div+css 实现

1、图片背景需要通过 ps 处理成透明；

2、设置图片所在 div 的样式（实现了图片居中显示，并可在上面附加文本输入框、按钮

等）：

#imgcenter{

position:absolute;/*层漂浮*/

top:50%;

left:50%;

width:770px;

height:400px;

margin-top:-200px;/*注意这里必须是DIV高度的一半*/

margin-left:-385px;/*这里是DIV宽度的一半*/

opacity:1.0;

background: url(<%=basePath%>images/benzIcon/login.png) center

50%;background-repeat:no-repeat;

}

3、form 输入元素的添加：

(1):form 所在的元素需要定义一个 div(如下所示)；

#divcenter{

position:absolute;/*层漂浮*/

top:50%;

left:50%;

width:770px;

height:358px;

下载后可阅读完整内容，剩余3页未读，立即下载

ForgottenWitByGod

粉丝: 1
资源: 11

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

Swing GUI设置登录界面的背景图片并把内容放到图片上面源码

登录页面自动切换背景图

css和js实现弹出登录居中界面完整代码

制作一个背景颜色为#FF0,字体颜色为#F00，文本居中显示的HTML页面

盒子模型相关属性控制页 面中的各个元素，制作一个背景图片是黑色圆形的页面

页面制作作业 div

最新资源

盒子模型相关属性控制页面中的各个元素，制作一个背景图片是黑色圆形的页面