前端学习日记 | 搭建微头条登录页面
日期：2026年06月08日
学习工具：Visual Studio Code（VS Code）
今天正式使用 VS Code 编写前端代码，练习 HTML + CSS 基础布局与样式美化，完成了一个视觉效果不错的登录页面。页面采用橙色渐变背景，搭配白色登录卡片，整体布局居中、交互样式完整，包含输入框、登录按钮、跳转链接等常用元素，巩固了弹性布局、渐变背景、圆角、阴影、鼠标悬浮效果等知识点。
一、实现效果说明
- 页面整体占满全屏，背景为橙色渐变；
- 白色登录卡片居中展示，带有圆角与阴影，立体感更强；
- 用户名、密码输入框获得焦点时边框变色；
- 登录按钮自带悬浮加深配色效果；
- 底部设置「立即注册」「忘记密码」跳转链接，鼠标悬浮出现下划线。
二、完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>微头条 - 登录</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
/* 橙色渐变背景 */
background: linear-gradient(135deg, #ff8c42, #ff6b35);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.login-card {
width: 400px; /* 加宽一点，更好看 */
background: white;
padding: 30px;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.login-card h2 {
text-align: center;
margin-bottom: 24px;
color: #333;
}
.login-card input {
width: 100%;
padding: 12px;
margin-bottom: 16px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.2s;
}
.login-card input:focus {
outline: none;
border-color: #ff8c42; /* 焦点边框橙色 */
}
.login-card button {
width: 100%;
padding: 12px;
background: #ff8c42; /* 橙色按钮 */
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
.login-card button:hover {
background: #ff6b35; /* 按钮hover深一点橙 */
}
.register-link {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #666;
}
.register-link a {
color: #ff8c42;
text-decoration: none;
margin: 0 5px;
}
.register-link a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-card">
<h2>微头条登录</h2>
<input type="text" placeholder="用户名" id="username">
<input type="password" placeholder="密码" id="password">
<button id="loginBtn">登录</button>
<div class="register-link">
<a href="#">立即注册</a>
|
<a href="#">忘记密码</a>
</div>
</div>
</body>
</html>
三、知识点总结
- 全局样式重置：使用通配选择器
*清除浏览器默认内外边距，统一盒子模型。 - Flex 弹性布局：通过
display: flex结合居中属性，快速实现卡片水平+垂直居中。 - 渐变背景：
linear-gradient()实现双色渐变，丰富页面视觉。 - 交互样式：
focus控制输入框选中状态，hover实现按钮、链接的鼠标悬浮效果。 - 美化属性：
border-radius圆角、box-shadow阴影，让页面更贴近实际网页设计风格。
四、学习感悟
今天熟悉了 VS Code 的基础使用，把 HTML 结构和 CSS 样式结合完成了实战小案例。从标签书写、样式调试到细节美化，一步步排查格式错误，对前端页面制作有了更直观的理解。后续继续练习布局与交互，尝试加入 JavaScript 实现简单的表单判断功能。
浙公网安备 33010602011771号