jsp登陆界面美化代码

JSP（JavaServer Pages）是一种用于创建动态Web页面的技术，它允许在HTML或XML等静态页面中嵌入Java代码。美化JSP登录界面通常涉及使用HTML、CSS和JavaScript来提升界面的视觉效果和用户体验。

基础概念

JSP：JavaServer Pages，一种服务器端技术，用于生成动态Web内容。
HTML：超文本标记语言，用于创建网页的结构。
CSS：层叠样式表，用于设置网页的布局和样式。
JavaScript：一种脚本语言，用于实现网页上的交互功能。

类型与应用场景

类型：JSP页面通常包含HTML标记和JSP元素（如脚本元素、指令元素等）。
应用场景：适用于需要动态生成内容的Web应用，如电子商务网站、社交网络、企业管理系统等。

示例代码

以下是一个简单的JSP登录界面美化示例：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
        .login-container h2 {
            margin-bottom: 20px;
            text-align: center;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input[type="text"],
        .form-group input[type="password"] {
            width: calc(100% - 22px);
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .form-group input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .form-group input[type="submit"]:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form action="login" method="post">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <input type="submit" value="Login">
            </div>
        </form>
    </div>
</body>
</html>