<!DOCTYPE html> <!-- 声明文档类型：告诉浏览器这是一个标准的 HTML5 页面 -->
<html lang="zh-CN"><!-- 根标签：lang="zh-CN" 表示网页主要语言为简体中文，有助于搜索引擎和屏幕阅读器识别 -->
<head>
<meta charset="UTF-8">
<title>微头条 - 登录</title><!-- 网页标题：会显示在浏览器的标签页上，也是收藏夹默认名称 -->
<style> /* 样式标签：在这里编写 CSS 代码，用来控制网页元素长什么样（排版、颜色等） */
* {/* 通配选择器：重置所有元素边距，让宽高包含 padding 和 border */
margin: 0; /* 清除浏览器默认的外边距 */
padding: 0;/* 清除浏览器默认的内边距 */
box-sizing: border-box;/* 采用盒子模型，让 width/height 包含边框和内边距，方便布局 */
}
body {
height: 100vh; /* 设置高度为视口高度的 100%，即占满整个屏幕可见区域 */
background: linear-gradient(135deg, #8067cf 0%, #764ba2 100%);/* 设置背景为 135度角的紫蓝渐变色 */
display: flex;/* 开启 Flexbox 弹性布局模式 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;/* 设置全局字体族，优先使用系统无衬线字体 */
}
/* 登录卡片 */
.login-card {
width: 400px;/* 固定卡片宽度为 360px */
background: white;/* 卡片背景设为白色 */
padding: 30px;/* 内边距 30px，让内容与卡片边缘保持距离 */
border-radius: 16px;/* 圆角 16px，使卡片看起来更柔和现代 */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /*加阴影效果，增加卡片的立体悬浮感*/
}
.login-card h2 { /* 卡片内的二级标题样式 */
text-align: center;/* 文字居中对齐 */
margin-bottom: 24px; /* 底部留出 24px 的外边距，与下方输入框拉开间距 */
color: #333;/* 文字颜色设为深灰色 */
}
/* 输入框通用样式 */
.login-card input {
width: 100%;/* 宽度撑满父级容器（即减去 padding 后的可用空间） */
padding: 12px;/* 内边距 12px，让输入的文字不紧贴边框 */
margin-bottom: 16px;/* 底部外边距 16px，分隔两个输入框 */
border: 1px solid #ddd;/* 1px 实线浅灰色边框 */
border-radius: 8px;/* 边框圆角 8px */
font-size: 14px;/* 字号 14px */
transition: border-color 0.2s;/* 过渡动画：边框颜色改变时会有 0.2秒的平滑渐变效果 */
}
/* 输入框获得焦点时（正在输入）改变边框颜色 */
.login-card input:focus {
outline: none; /* 去掉浏览器默认的蓝色聚焦轮廓 */
border-color: #667eea;/* 将边框颜色变为主题色，提供视觉反馈 */
}
/* 登录按钮 */
.login-card button {
width: 100%;/* 按钮宽度撑满父级容器 */
padding: 12px; /* 上下内边距 12px，让按钮更高更易点击 */
background: #ded74b; /* 按钮背景色为主题蓝紫色 */
color: white;/* 按钮文字为白色 */
border: none;/* 去除按钮默认的边框 */
border-radius: 8px;/* 按钮圆角 8px，与输入框保持一致 */
font-size: 16px;/* 字号稍大一点，突出重要性 */
cursor: pointer; /* 鼠标移入时变为小手图标，提示可点击 */
transition: background 0.3s;/* 背景色变化的过渡动画 */
}
/* 鼠标悬停时按钮上的状态 */
.login-card button:hover {
background: #5bd4b6;/* 加深背景色，提供交互反馈 */
}
/* 注册链接区域 */
.register-link {
text-align: center; /* 文本居中 */
margin-top: 20px;/* 顶部外边距 20px，与上方按钮拉开距离 */
font-size: 14px;/* 字号 14px */
color: #666; /* 提示文字颜色为灰色 */
}
.register-link a { /* 注册链接（a标签）样式 */
color: #667eea; /* 链接文字颜色为主题色 */
text-decoration: none; /* 去掉链接默认的下划线 */
}
.register-link a:hover { /* 鼠标悬停在链接上时 */
text-decoration: underline;/* 恢复下划线，提示用户可以点击 */
}
</style>
</head>
<body><!-- 主体区域：这里面的所有内容才是用户在浏览器页面上真正能看到的 -->
<div class="login-card"><!-- 登录卡片容器 div：class="login-card" 用于绑定上面写的 CSS 样式 -->
<h2>微头条登录</h2> <!-- 二级标题：作为表单的说明文字 -->
<input type="text" placeholder="用户名" id="username"> <!-- 用户名输入框：type="text" 表示普通文本输入；placeholder 提供灰色的占位提示文字 -->
<input type="password" placeholder="密码" id="password"><!-- 密码输入框：type="password" 会将输入的字符隐藏为小黑点 -->
<button id="loginBtn">登录</button> <!-- 登录按钮：id="loginBtn" 预留标识，以后可以通过 JS 获取这个按钮来绑定点击事件 -->
<div class="register-link"><!-- 注册提示区域 -->
<a href="#">立即注册</a> <!-- a 标签：超链接标签，href 指向要跳转的目标页面路径 -->
<a href="#">忘记密码</a>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号