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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-01

浏览次数：次

返回列表

登录页面采用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. 表单样式：美化输入框与按钮

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

OneStory

OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。

319 查看详情 OneStory

建议做法：

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

.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表单样式与布局练习的详细内容，更多请关注其它相关文章！

# 两种类型 # 德州网站seo优化公司 # 醴陵微信营销推广 # 怎么营销推广商品 # seo 优化运行原理 # 揭阳网站优化什么价格高 # 官网长尾关键词排名软件 # 天津外贸网站建设流程 # 亿恩seo # 小程序地推推广网站 # 韶关网站优化关键词报价 # 几次 # 就能 # 你可以 # 选择器 # css # 是一个 # 中不 # 请输入 # 输入框 # 表单 # red # css布局 # 排列 # 移动端适配 # html表单 # 响应式设计 # ai # html # word