首页 > 文章 > 前端

用CSS制作简单登录页面教程

时间：2025-12-30 23:31:38 448浏览收藏

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《用CSS制作简单登录页面教程》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

登录页面采用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>
      &lt;input type=&quot;text&quot; id=&quot;username&quot; name=&quot;username&quot; placeholder=&quot;请输入用户名&quot; required&gt;
    </div>
    <div class="input-group">
      <label for="password">密码</label>
      &lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;请输入密码&quot; required&gt;
    </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. 表单样式：美化输入框与按钮

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

建议做法：

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

.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状态和移动端适配，多调试几次就能掌握。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

前往漫画官网入口并下载 ➜