微头条前端
1.微头条登录页HTML&CSS静态实现login
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>微头条 - 登录</title>
<style>
/* 重置所有元素边距，让宽高包含 padding 和 border */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh; /* 视口高度 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* 登录卡片 */
.login-card {
width: 360px;
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: #667eea;
}
/* 登录按钮 */
.login-card button {
width: 100%;
padding: 12px;
background: #667eea;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
/* 鼠标悬停时加深颜色 */
.login-card button:hover {
background: #5a67d8;
/* background:red */
}
/* 注册链接区域 */
.register-link {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #666;
}
.register-link a {
color: #667eea;
text-decoration: none;
}
.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>
</div>
</div>
</body>
</html>
2.微头条登录页JS交互(模拟验证)login
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>微头条 - 登录</title>
<style>
/* 重置所有元素边距，让宽高包含 padding 和 border */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh; /* 视口高度 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* 登录卡片 */
.login-card {
width: 360px;
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: #667eea;
}
/* 登录按钮 */
#loginBtn {
width: 100%;
padding: 12px;
background: #667eea;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
/* 鼠标悬停时加深颜色 */
#loginBtn:hover {
background: #5a67d8;
}
/* 清空按钮 */
#clearBtn {
width: 100%;
padding: 12px;
background: #e2e8f0;
color: #333;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
margin-top: 8px;
}
#clearBtn:hover {
background: #cbd5e0;
}
/* 注册链接区域 */
.register-link {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #666;
}
.register-link a {
color: #667eea;
text-decoration: none;
}
.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>
<button id="clearBtn">清空</button>
<div class="register-link">
<a href="#">立即注册</a>
</div>
</div>
<script>
// 获取元素
const loginBtn = document.getElementById('loginBtn');
const clearBtn = document.getElementById('clearBtn');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
// 登录验证函数
function handleLogin() {
const username = usernameInput.value;
const password = passwordInput.value;
// 简单格式校验
if (username.length < 3) {
alert('用户名长度至少为3位');
return;
}
if (password.length < 6) {
alert('密码长度至少为6位');
return;
}
// 模拟验证（实际会发送请求到后端）
if (username === 'weitoutiao' && password === '123456') {
alert('登录成功！即将进入微头条首页');
// 后续课次会改为页面跳转
} else {
alert('用户名或密码错误');
}
}
// 清空表单函数
function clearForm() {
usernameInput.value = '';
passwordInput.value = '';
}
// 绑定事件
loginBtn.onclick = handleLogin;
clearBtn.onclick = clearForm;
</script>
</body>
</html>
3.微头条新闻列表静态页面（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 {
background: #f5f5f5;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
/* 发布按钮 */
.publish-btn {
display: block;
width: 200px;
margin: 20px auto;
background: #1890ff;
color: white;
border: none;
border-radius: 24px;
padding: 10px 0;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
.publish-btn:hover {
background: #0c7bdf;
}
/* 新闻列表 */
.news-list {
margin-top: 20px;
}
/* 新闻卡片 */
.news-item {
background: white;
border-radius: 12px;
padding: 20px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: transform 0.2s, box-shadow 0.2s;
}
.news-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.news-item h3 {
margin-bottom: 8px;
color: #333;
}
.time {
font-size: 12px;
color: #999;
margin-bottom: 12px;
}
.content {
font-size: 14px;
color: #666;
line-height: 1.5;
margin-bottom: 12px;
}
.actions a {
color: #1890ff;
text-decoration: none;
margin-right: 20px;
font-size: 14px;
}
.actions a:hover {
text-decoration: underline;
}
.actions button {
background: none;
border: none;
color: #ff4d4f;
cursor: pointer;
font-size: 14px;
}
.actions button:hover {
/* color: #e0443a; */
color: #0be51a;
}
</style>
</head>
<body>
<div class="container">
<button class="publish-btn">+ 发布微头条</button>
<div class="news-list">
<!-- 新闻卡片 1 -->
<div class="news-item">
<h3>微头条1.0 正式发布</h3>
<div class="time">2025-06-01 10:30</div>
<div class="content">微头条是一个轻量级信息分享平台，今天正式启动项目，采用 Vue3 + SpringBoot 技术栈...</div>
<div class="actions">
<a href="#">查看详情</a>
<button>点赞 0</button>
</div>
</div>
<!-- 新闻卡片 2 -->
<div class="news-item">
<h3>Vue3 组合式 API 学习心得</h3>
<div class="time">2025-06-02 15:20</div>
<div class="content">setup 语法糖非常简洁，ref和reactive让数据响应式变得容易...</div>
<div class="actions">
<a href="#">查看详情</a>
<button>点赞 2</button>
</div>
</div>
<!-- 新闻卡片 3 -->
<div class="news-item">
<h3>下周课程预告：前后端联调</h3>
<div class="time">2025-06-03 09:00</div>
<div class="content">我们将学习 Axios 发送请求，连接真实的 SpringBoot 后端...</div>
<div class="actions">
<a href="#">查看详情</a>
<button>点赞 1</button>
</div>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号