htmlcss登录页面代码

写登录页最烦的就是“看起来简单，做起来一堆边角料”。面代码别信那些五分钟搞定的录页鬼话。真正跑通一个能用的面代码登录框，你得处理对齐、录页焦点态、面代码错误提示，录页还有那该死的面代码按钮手感。

先看最基础的录页骨架。我习惯把结构、面代码样式、录页逻辑拆开，面代码但这里只讲HTML和CSS。录页下面这段代码，面代码是录页我上周给一个内部工具写的登录页核心部分——没有花哨的动画，但足够干净。

 <div class="login-container"> <form class="login-form" action="/login" method="post"> <h2>欢迎回来</h2> <label for="email">邮箱</label> <input type="email" id="email" name="email" placeholder="you@example.com" required autocomplete="email"> <label for="password">密码</label> <input type="password" id="password" name="password" placeholder="••••••••" required autocomplete="current-password"> <div class="form-row"> <label class="remember"> <input type="checkbox" name="remember"> 记住我 </label> <a href="/forgot">忘记密码？</a> </div> <button type="submit" class="btn-primary">登 录</button> </form> </div> 

注意那个autocomplete属性——很多人漏掉。浏览器自动填充密码靠的就是它。没有这个，用户每次都要手动输，烦死你。

CSS才是重头戏。我见过太多人把登录页做得像表格，输入框挤在一起，按钮灰扑扑的。我自己调试时，最先盯的是padding和border-radius。输入框高度低于40px就别想点得舒服，圆角太大显得玩具感，太小又生硬。

 .login-container {  max-width: 400px; margin: 0 auto; padding: 2.5rem 2rem; background: #fff; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); } .login-form label {  display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.4rem; color: #333; } .login-form input[type="email"], .login-form input[type="password"] {  width: 100%; padding: 0.7rem 0.9rem; margin-bottom: 1.2rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; transition: border-color 0.15s, box-shadow 0.15s; background: #f9fafb; } .login-form input:focus {  outline: none; border-color: #4f46e5; background: #fff; box-shadow: 0 0 0 3px rgba(79,70,229,0.15); } .form-row {  display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; font-size: 0.9rem; } .btn-primary {  width: 100%; padding: 0.8rem; border: none; border-radius: 8px; background: #4f46e5; color: white; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.05s; } .btn-primary:hover {  background: #4338ca; } .btn-primary:active {  transform: scale(0.98); } 

那个:focus样式必须给。键盘用户Tab到输入框时，没焦点提示等于瞎按。我特意用了box-shadow而不是简单的border-color变化，因为外发光在浅色背景下更明显。

还有个细节——按钮的active状态加了个scale(0.98)。按下去时微微缩小，反馈感就出来了。这种小动作不用JS，纯CSS就够。

响应式就别偷懒了。max-width:400px在手机上刚好，但大屏上会显得孤零零。我通常会在外面套个min-height:100vh的容器，用flex居中。这样不管屏幕多宽，登录卡都在正中间，视觉上稳。

 body {  min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f0f2f5; } 

最后说个坑：placeholder颜色。默认灰色在部分浏览器里太浅，根本看不清。加一行::placeholder样式，调成#9ca3af，不刺眼也读得懂。

整个页面下来，其实代码量不到80行。但每一条规则都踩过坑。登录页是门面，用户第一次进你产品就卡在密码框上，体验分直接掉一半。别嫌麻烦，把间距、焦点、反馈做扎实，比加一百个渐变背景都管用。

(责任编辑：热点)