很多JSP项目的录界登录页还停留在裸奔状态——白底黑字、默认按钮、面代码美表格布局。录界能用，面代码美但丑。录界更要命的面代码美是，这种页面往往直接暴露了后端技术栈，录界对安全也没好处。面代码美下面是录界一套可以直接抄的改造方案。

先看原始代码长什么样

典型的面代码美JSP登录表单大概是这样：

<form action="login.jsp" method="post"> 用户名：<input type="text" name="username"><br> 密码：<input type="password" name="password"><br> <input type="submit" value="登录"> </form>

这段代码的问题不在功能，而在呈现。录界浏览器默认给input加了边框和阴影，面代码美按钮是录界灰色的系统样式，整个表单贴着页面左上角。面代码美用户打开的录界第一反应是“这网站靠谱吗”。

用CSS把表单拉回正轨

第一步，给body一个渐变背景。不用太花哨，从深蓝到浅蓝的线性渐变就够。然后把表单放进一个卡片容器里，加圆角和阴影，居中显示。

body {  margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e3c72, #2a5298); font-family: "Microsoft YaHei", sans-serif; } .login-box {  background: #fff; padding: 40px 36px; border-radius: 10px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); width: 340px; }

这里有个细节：height: 100vh配合flex居中，比用绝对定位靠谱得多。绝对定位遇到不同屏幕尺寸容易跑偏，flex不会。

输入框和按钮的微调

默认的input边框太硬。把border改成1px solid #ddd，加8px圆角，padding给12px。聚焦时把边框颜色换成主题蓝，再加一层淡淡的box-shadow，用户能明显感知到当前输入位置。

input[type="text"], input[type="password"] {  width: 100%; padding: 12px; margin-bottom: 18px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; font-size: 14px; transition: border-color 0.3s, box-shadow 0.3s; } input:focus {  outline: none; border-color: #2a5298; box-shadow: 0 0 0 3px rgba(42,82,152,0.15); }

按钮别再用默认样式了。背景用和body渐变呼应的深蓝，文字白色，去掉系统边框，加圆角和hover过渡。点击时稍微下沉1px，手感会好很多。

input[type="submit"] {  width: 100%; padding: 12px; background: #2a5298; color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: background 0.3s, transform 0.1s; } input[type="submit"]:hover {  background: #1e3c72; } input[type="submit"]:active {  transform: translateY(1px); }

JSP层面的小改动

把CSS直接写在<style>标签里，或者抽成单独的.css文件用link引入。如果项目里已经有公共样式，建议单独建一个login.css，避免和其他页面打架。另外，给表单加个autocomplete="off"能减少浏览器自动填充带来的样式干扰。

还有一点容易被忽略：错误提示。登录失败时如果只是弹个alert，体验很割裂。可以在表单上方预留一个div，用JSP的request属性判断是否有错误信息，有的话直接渲染成红色小字。这样页面不用跳转就能给出反馈。

<% String error = (String) request.getAttribute("errorMsg"); if (error != null) {  %> <p style="color:#e74c3c; font-size:13px; margin-bottom:12px;"><%= error %></p> <% } %>

响应式不能忘

340px的卡片在手机上没问题，但padding要收一收。加个媒体查询，屏幕宽度小于400px时把padding降到24px，字体稍微调小。这不是可选项，现在用手机访问后台系统的人不少。

@media (max-width: 400px) {  .login-box {  width: 90%; padding: 28px 20px; } }

改完之后，登录页从“能用”变成“像回事”。代码量不大，一个下午就能搞定。关键是别让用户在第一眼就对系统失去信心——登录页就是门面，该花的功夫得花。