做一个简洁的登录页面，核心是把结构写清楚，再用CSS控制间距、边框和自适应。下面直接给出一个可复用的实现思路与代码。
一、页面结构设计
登录页通常包含标题、两个输入框（账号、密码）和一个提交按钮。用<form>包裹，语义更清晰，也方便后续加校验。
<div class="login-wrap">
<form class="login-form">
<h3>用户登录</h3>
<label>账号</label>
<input type="text" name="username" placeholder="请输入账号" />
<label>密码</label>
<input type="password" name="password" placeholder="请输入密码" />
<button type="submit">登录</button>
</form>
</div>
二、基础样式写法
用flex让表单垂直居中，输入框统一宽度与内边距，去掉默认边框并加浅色描边，整体就会显得干净。
.login-wrap {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f5f6f8;
}
.login-form {
width: 320px;
padding: 24px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.login-form h3 {
margin: 0 0 16px;
text-align: center;
}
.login-form label {
display: block;
margin: 12px 0 6px;
font-size: 14px;
}
.login-form input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
.login-form button {
width: 100%;
margin-top: 20px;
padding: 10px;
border: none;
background: #4a90e2;
color: #fff;
border-radius: 4px;
cursor: pointer;
}
三、响应式表单样式技巧
在手机上，屏幕变窄，可以把表单宽度改为百分比，并用媒体查询微调间距，避免内容顶到边缘。
@media (max-width: 480px) {
.login-form {
width: 90%;
padding: 18px;
}
.login-form input,
.login-form button {
padding: 12px;
}
}
常用技巧总结
- 用box-sizing: border-box防止输入框撑破容器
- 统一label和input间距，视觉更整齐
- 按钮宽度跟随表单，点击区域更大
- 媒体查询只改必要属性，减少样式冗余
四、完整示例
把结构和样式合在一起，就是一个简洁的响应式登录页：
<style>
.login-wrap {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f5f6f8;
}
.login-form {
width: 320px;
padding: 24px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.login-form h3 { margin: 0 0 16px; text-align: center; }
.login-form label { display: block; margin: 12px 0 6px; font-size: 14px; }
.login-form input {
width: 100%; padding: 10px; border: 1px solid #ddd;
border-radius: 4px; box-sizing: border-box;
}
.login-form button {
width: 100%; margin-top: 20px; padding: 10px; border: none;
background: #4a90e2; color: #fff; border-radius: 4px; cursor: pointer;
}
@media (max-width: 480px) {
.login-form { width: 90%; padding: 18px; }
.login-form input, .login-form button { padding: 12px; }
}
</style>
<div class="login-wrap">
<form class="login-form">
<h3>用户登录</h3>
<label>账号</label>
<input type="text" name="username" placeholder="请输入账号" />
<label>密码</label>
<input type="password" name="password" placeholder="请输入密码" />
<button type="submit">登录</button>
</form>
</div>
五、小结
简洁登录页并不难，把握住结构清晰、样式统一、媒体查询适配这三点，就能用纯CSS写出兼顾桌面与手机的表单界面。后续可再叠加过渡动画或校验提示，体验会更完整。