怎样用CSS制作简单的登录页面_CSS表单样式与布局练习-css教程-PHP中文网

怎样用CSS制作简单的登录页面_CSS表单样式与布局练习

P粉602998670

发布： 2025-11-01 23:34:02

原创

736人浏览过

登录页面采用HTML表单与CSS美化，结构清晰。通过Flexbox实现居中布局，表单包含用户名密码输入框、登录按钮及辅助链接，使用响应式设计适配不同屏幕，输入框和按钮添加悬停与聚焦效果，整体简洁美观且用户体验良好。

怎样用css制作简单的登录页面_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>
    <button type="submit">登录</button>
    <p class="extra-link">
      <a href="#">忘记密码？</a>
      <a href="#">注册新账号</a>
    </p>
  </form>
</div>

登录后复制

2. CSS布局：居中容器与响应式设计

让登录框在页面居中，适配不同屏幕尺寸。使用Flexbox简化布局。

关键点： 设置背景色、居中对齐、限制最大宽度以保持美观。

立即学习“前端免费学习笔记（深入）”；

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f4f6f9;
  padding: 20px;
}

.login-form {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 350px;
}

登录后复制

3. 表单样式：美化输入框与按钮

提升输入体验，让界面看起来更专业。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

建议做法：

统一输入框高度和圆角
添加内边距和边框悬停效果
按钮使用对比色，并设置点击反馈

.input-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #333;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

input:focus {
  outline: none;
  border-color: #4d90fe;
  box-shadow: 0 0 5px rgba(77, 144, 254, 0.3);
}

button {
  width: 100%;
  padding: 12px;
  background-color: #4d90fe;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  background-color: #357ae8;
}

登录后复制

4. 辅助元素：链接与文字排版

底部链接要清晰但不抢眼，合理安排位置。

小技巧： 使用flex让两个链接左右分布或垂直排列，根据空间调整。

.extra-link {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.extra-link a {
  color: #4d90fe;
  text-decoration: none;
  margin: 0 5px;
}

.extra-link a:hover {
  text-decoration: underline;
}

登录后复制

基本上就这些。这个登录页简洁、易读、响应式，适合初学者练习CSS布局和表单样式。你可以继续加图标、动画或深色模式来扩展功能。不复杂但容易忽略细节，比如focus状态和移动端适配，多调试几次就能掌握。

以上就是怎样用CSS制作简单的登录页面_CSS表单样式与布局练习的详细内容，更多请关注php中文网其它相关文章！