使用css完成登录表单界面设计-css教程-PHP中文网

使用css完成登录表单界面设计

P粉602998670

发布： 2025-09-20 10:44:01

原创

216人浏览过

登录表单设计需布局清晰、视觉舒适、体验良好。1. HTML结构包含用户名密码输入框、记住我选项和登录按钮，使用语义化标签；2. CSS设置渐变背景、居中显示，表单圆角阴影，输入框聚焦边框变色，按钮悬停效果，提升交互反馈；3. 设计强调视觉层次、响应式适配与用户体验细节；4. 可扩展图标、忘记密码链接、暗黑模式等增强功能。整体简洁专业，注重细节。

使用css完成登录表单界面设计

设计一个简洁美观的登录表单界面，关键在于布局清晰、视觉舒适和用户体验良好。下面是一个使用 HTML 和 CSS 实现的登录表单示例，包含输入框、登录按钮和记住密码选项。

1. 基本HTML结构

先构建登录表单的基本结构：

<div class="login-container">
  <form class="login-form">
    <h2>用户登录</h2>
    <div class="input-group">
      <label for="username">用户名</label>
      <input type="text" id="username" name="username" placeholder="请输入用户名" required>
    </div>
    <div class="input-group">
      <label for="password">密码</label>
      <input type="password" id="password" name="password" placeholder="请输入密码" required>
    </div>
    <div class="remember-me">
      <input type="checkbox" id="remember" name="remember">
      <label for="remember">记住我</label>
    </div>
    <button type="submit">登 录</button>
  </form>
</div>

登录后复制

2. 核心CSS样式设计

使用CSS美化表单，使其居中显示，具有圆角边框、阴影和良好的间距：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
<p>body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}</p><p>.login-container {
width: 100%;
max-width: 400px;
padding: 20px;
}</p><p>.login-form {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}</p><p>.login-form h2 {
text-align: center;
margin-bottom: 24px;
color: #333;
font-size: 24px;
}</p><p>.input-group {
margin-bottom: 20px;
}</p><p>.input-group label {
display: block;
margin-bottom: 6px;
color: #555;
font-size: 14px;
}</p><p>.input-group input[type="text"],
.input-group input[type="password"] {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.3s ease;
}</p><p>.input-group input:focus {
outline: none;
border-color: #667eea;
}</p><p>.remember-me {
display: flex;
align-items: center;
margin-bottom: 20px;
font-size: 14px;
}</p><p>.remember-me input {
margin-right: 8px;
}</p><p>.login-form button {
width: 100%;
padding: 12px;
background-color: #667eea;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}</p><p>.login-form button:hover {
background-color: #5a6fd8;
}</p>

登录后复制

3. 设计要点说明

这个登录表单的设计注重以下几点：

bee餐饮点餐外卖小程序

bee餐饮点餐外卖小程序是针对餐饮行业推出的一套完整的餐饮解决方案，实现了用户在线点餐下单、外卖、叫号排队、支付、配送等功能，完美的使餐饮行业更高效便捷！功能演示：1、桌号管理登录后台，左侧菜单 “桌号管理”，添加并管理你的桌号信息，添加以后在列表你将可以看到 ID 和密钥，这两个数据用来生成桌子的二维码2、生成桌子二维码例如上面的ID为 308，密钥为 d3PiIY，那么现在去左侧菜单微信设置