登录居中的jsp代码
时间: 2024-12-27 10:22:57 浏览: 6
### 实现登录页面元素居中的JSP代码
为了使登录页面的元素能够居中显示,可以结合HTML、CSS以及少量JavaScript来完成布局工作。下面是一个完整的例子,展示了如何创建一个简单的登录表单并使其位于浏览器窗口中央。
#### HTML部分
在`login.jsp`文件里编写如下结构:
```html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="styles.css"> <!-- 假设有一个外部样式表 -->
</head>
<body>
<div id="overlay"></div> <!-- 遮罩层 -->
<form action="checklogin.jsp" method="post" class="centered-form">
<h2>Login Form</h2>
<label for="username"><b>Username:</b></label><br/>
<input type="text" placeholder="Enter Username" name="uname" required /><br/>
<label for="password"><b>Password:</b></label><br/>
<input type="password" placeholder="Enter Password" name="psw" required /><br/>
<button type="submit">Login</button>
</form>
<script src="scripts.js"></script> <!-- 可选:用于处理额外逻辑 -->
</body>
</html>
```
#### CSS部分 (styles.css)
为了让这个表单调用更加美观且居于屏幕中心位置,在同一个项目目录下的`styles.css`文件中加入以下规则集:
```css
/* 设置全局字体 */
* {
box-sizing: border-box;
}
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.centered-form {
padding: 2rem;
max-width: 300px;
width: 90%; /* 对较小设备友好 */
background-color: white;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 2;
}
#overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
}
```
上述代码片段使用了Flexbox模型让整个页面的内容垂直水平方向上都能保持居中[^3]。同时设置了`.centered-form`类以确保即使是在移动设备上的表现也很好看,并提供了良好的用户体验。
#### JavaScript部分 (可选 scripts.js)
如果需要进一步增强交互体验,则可以在同一项目的根目录下添加名为`scripts.js`的小脚本文件来进行一些基本的操作,比如点击遮罩层关闭弹窗等功能。不过对于简单的需求来说这一步骤并非必需。
---
阅读全文