<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入Bootstrap CSS，用于快速布局和样式（可选，也可纯手写CSS） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>专升本刷题助手-个人中心</title>
<style>
/* 顶部标题栏样式 */
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.top-bar h3 {
margin: 0;
font-size: 20px;
font-weight: bold;
color: #007bff;
}
.top-bar .icons {
display: flex;
align-items: center;
}
.top-bar .icons img {
width: 24px;
height: 24px;
margin-left: 20px;
cursor: pointer;
}
/* 个人信息卡片样式 */
.user-card {
background-color: #4285f4;
color: #fff;
padding: 20px;
border-radius: 10px;
margin: 20px;
}
.user-card .user-info {
display: flex;
align-items: center;
}
.user-card .user-info img {
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 15px;
}
.user-card .user-info .name {
font-size: 18px;
font-weight: bold;
}
.user-card .stats {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.user-card .stats .stat-item {
text-align: center;
}
.user-card .stats .stat-item span {
display: block;
font-size: 22px;
font-weight: bold;
}
.user-card .stats .stat-item p {
margin: 0;
font-size: 14px;
}
/* 功能菜单样式 */
.menu-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
margin: 10px 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.menu-item img {
width: 20px;
height: 20px;
}
/* 底部导航栏样式 */
.bottom-nav {
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px 0;
background-color: #fff;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.bottom-nav a {
text-align: center;
text-decoration: none;
color: #333;
}
.bottom-nav a img {
width: 24px;
height: 24px;
margin-bottom: 5px;
}
.bottom-nav a.active {
color: #007bff;
}
</style>
</head>
<body>
<!-- 顶部标题栏 -->
<div class="top-bar">
<h3>专升本刷题助手</h3>
<div class="icons">
<!-- 搜索图标，这里用占位图，实际可替换成对应图标 -->
<img src="https://via.placeholder.com/24" alt="搜索">
<!-- 消息图标，带消息数量提示 -->
<div style="position: relative; margin-left: 20px;">
<img src="https://via.placeholder.com/24" alt="消息">
<span
style="position: absolute; top: -5px; right: -5px; background-color: red; color: white; font-size: 12px; padding: 2px 5px; border-radius: 50%;">3</span>
</div>
<!-- 用户头像图标 -->
<img src="https://via.placeholder.com/24" alt="用户">
</div>
</div>
<!-- 个人信息卡片 -->
<div class="user-card">
<div class="user-info">
<img src="https://via.placeholder.com/60" alt="用户头像">
<div>
<div class="name">专升本考生</div>
<div>学号: 20250001</div>
</div>
</div>
<div class="stats">
<div class="stat-item">
<span>86</span>
<p>正确率(%)</p>
</div>
<div class="stat-item">
<span>28</span>
<p>考试次数</p>
</div>
<div class="stat-item">
<span>156</span>
<p>收藏题目</p>
</div>
</div>
</div>
<!-- 功能菜单 -->
<div class="menu-item">
<span>设置</span>
<img src="https://via.placeholder.com/20" alt="箭头">
</div>
<div class="menu-item">
<span>学习历史</span>
<img src="https://via.placeholder.com/20" alt="箭头">
</div>
<!-- 底部导航栏 -->
<div class="bottom-nav">
<a href="#" class="active">
<img src="https://via.placeholder.com/24" alt="首页">
<span>首页</span>
</a>
<a href="#">
<img src="https://via.placeholder.com/24" alt="模拟考试">
<span>模拟考试</span>
</a>
<a href="#">
<img src="https://via.placeholder.com/24" alt="我的收藏">
<span>我的收藏</span>
</a>
<a href="#">
<img src="https://via.placeholder.com/24" alt="个人中心">
<span>个人中心</span>
</a>
</div>
<!-- 引入Bootstrap JS（如果需要使用Bootstrap的交互功能，如下拉等，可选） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
index.html
index.html