<think>我们正在设计一个个人生活管理网站，需要自动填充背景图，并设计主要界面。
根据要求，我们需要创建一个网页，展示个人信息（姓名、学号、年龄、爱好）并设置背景图。
步骤：
1. 创建一个HTML文件，包含基本的HTML结构。
2. 设置背景图：我们可以使用CSS的background属性来设置背景图。这里我们可以使用在线图片或者本地图片。为了简便，我们可以使用在线图片URL。
3. 设计主要界面：包括个人信息的展示。我们可以使用一个容器（比如div）来放置个人信息，并设置样式使其居中显示。
假设我们使用以下在线图片作为背景：
https://images.unsplash.com/photo-1503437313881-503a91226402?auto=format&fit=crop&w=1952&q=80
注意：实际使用中，请确保你有权使用该图片，或者替换成你自己的图片。
我们将创建一个简单的页面，包含以下内容：
- 一个标题（例如：个人生活管理网站）
- 个人信息展示（姓名、学号、年龄、爱好）
我们将使用内联CSS来简化，但在实际项目中，建议使用外部CSS文件。
代码实现如下：</think>### 个人生活管理网站设计与实现
下面是一个完整的个人生活管理网站实现代码，包含自动填充背景图和主要界面设计：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>刘兴翰的个人生活管理网站</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
url('https://images.unsplash.com/photo-1503437313881-503a91226402?auto=format&fit=crop&w=1952&q=80');
background-size: cover;
background-attachment: fixed;
color: #fff;
min-height: 100vh;
transition: background 0.5s;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 40px 0;
animation: fadeIn 1.5s;
}
h1 {
font-size: 3rem;
margin-bottom: 10px;
text-shadow: 0 0 10px rgba(0, 155, 255, 0.8);
}
.subtitle {
font-size: 1.2rem;
opacity: 0.8;
}
.main-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-top: 30px;
}
.card {
background: rgba(20, 30, 48, 0.85);
border-radius: 15px;
padding: 25px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
transition: transform 0.3s, box-shadow 0.3s;
backdrop-filter: blur(10px);
border: 1px solid rgba(0, 155, 255, 0.3);
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 100, 200, 0.4);
}
.card h2 {
color: #4fc3f7;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #0288d1;
}
.info-item {
margin: 15px 0;
display: flex;
align-items: center;
}
.info-icon {
width: 40px;
height: 40px;
background: rgba(2, 136, 209, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 1.2rem;
}
.hobby-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 20px;
}
.hobby-item {
background: linear-gradient(135deg, #0288d1, #4fc3f7);
padding: 8px 15px;
border-radius: 20px;
font-weight: bold;
}
.profile-img {
width: 180px;
height: 180px;
border-radius: 50%;
border: 4px solid #0288d1;
margin: 0 auto 20px;
background: url('https://images.unsplash.com/photo-1541531455306-a1298a44eaf2?auto=format&fit=crop&w=500&q=60') center/cover;
box-shadow: 0 0 30px rgba(2, 136, 209, 0.6);
}
.bg-controls {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 30px;
flex-wrap: wrap;
}
.bg-btn {
padding: 8px 20px;
background: rgba(2, 136, 209, 0.7);
border: none;
border-radius: 30px;
color: white;
cursor: pointer;
transition: all 0.3s;
}
.bg-btn:hover {
background: rgba(2, 136, 209, 1);
transform: scale(1.05);
}
.schedule-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 20px;
}
.schedule-item {
background: rgba(255, 255, 255, 0.1);
padding: 10px;
border-radius: 8px;
text-align: center;
}
footer {
text-align: center;
padding: 30px 0;
margin-top: 50px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
}
h1 {
font-size: 2.2rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="profile-img"></div>
<h1>刘兴翰的个人生活管理</h1>
<div class="subtitle">生活规划 · 个人成长 · 兴趣管理</div>
</header>
<div class="main-content">
<div class="card">
<h2>个人信息</h2>
<div class="info-item">
<div class="info-icon">👤</div>
<div>
<strong>姓名：</strong> 刘兴翰
</div>
</div>
<div class="info-item">
<div class="info-icon">🎓</div>
<div>
<strong>学号：</strong> 230410001
</div>
</div>
<div class="info-item">
<div class="info-icon">🎂</div>
<div>
<strong>年龄：</strong> 19岁
</div>
</div>
<div class="info-item">
<div class="info-icon">📍</div>
<div>
<strong>位置：</strong> 5-401 实训室
</div>
</div>
</div>
<div class="card">
<h2>兴趣爱好</h2>
<p>以下是我热爱的活动：</p>
<div class="hobby-container">
<div class="hobby-item">⚽ 踢足球</div>
<div class="hobby-item">💻 编程开发</div>
<div class="hobby-item">🎵 听音乐</div>
<div class="hobby-item">📚 阅读书籍</div>
<div class="hobby-item">🎮 电子竞技</div>
<div class="hobby-item">🚴 户外骑行</div>
</div>
<h2 style="margin-top: 30px;">本周安排</h2>
<div class="schedule-grid">
<div class="schedule-item">周一：足球训练</div>
<div class="schedule-item">周二：网页设计</div>
<div class="schedule-item">周三：小组项目</div>
<div class="schedule-item">
周四：编程学习</div>
<div class="schedule-item">周五：足球比赛</div>
<div class="schedule-item">周末：户外活动</div>
</div>
</div>
<div class="card">
<h2>个人目标</h2>
<div class="info-item">
<div class="info-icon">🎯</div>
<div>
<strong>短期目标：</strong> 完成个人网站开发
</div>
</div>
<div class="info-item">
<div class="info-icon">🚀</div>
<div>
<strong>中期目标：</strong> 掌握前端开发技能
</div>
</div>
<div class="info-item">
<div class="info-icon">🌟</div>
<div>
<strong>长期目标：</strong> 成为全栈工程师
</div>
</div>
<h2 style="margin-top: 30px;">技能掌握</h2>
<div class="info-item">
<div>HTML/CSS</div>
<div style="flex-grow: 1; margin-left: 15px;">
<div style="height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px;">
<div style="width: 85%; height: 100%; background: #4fc3f7; border-radius: 4px;"></div>
</div>
</div>
</div>
<div class="info-item">
<div>JavaScript</div>
<div style="flex-grow: 1; margin-left: 15px;">
<div style="height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px;">
<div style="width: 70%; height: 100%; background: #4fc3f7; border-radius: 4px;"></div>
</div>
</div>
</div>
<div class="info-item">
<div>UI设计</div>
<div style="flex-grow: 1; margin-left: 15px;">
<div style="height: 8px; background: rgba(255,255,255,0.2); border-radius: 4px;">
<div style="width: 75%; height: 100%; background: #4fc3f7; border-radius: 4px;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-controls">
<button class="bg-btn" onclick="changeBackground(1)">科技背景</button>
<button class="bg-btn" onclick="changeBackground(2)">自然背景</button>
<button class="bg-btn" onclick="changeBackground(3)">抽象背景</button>
<button class="bg-btn" onclick="changeBackground(4)">运动背景</button>
</div>
</div>
<footer>
<p>© 2023 刘兴翰个人生活管理系统 | 实训时间：7月9日 | 实训地点：5-401</p>
</footer>
<script>
// 背景图片数组
const backgrounds = [
'https://images.unsplash.com/photo-1503437313881-503a91226402?auto=format&fit=crop&w=1952&q=80',
'https://images.unsplash.com/photo-1542831371-29b0f74f9713?auto=format&fit=crop&w=1950&q=80',
'https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=1950&q=80',
'https://images.unsplash.com/photo-1541625602330-2277a4c46182?auto=format&fit=crop&w=1950&q=80'
];
// 背景描述（用于替换）
const bgNames = ["科技背景", "自然背景", "抽象背景", "运动背景"];
function changeBackground(index) {
const body = document.body;
// 平滑过渡效果
body.style.opacity = '0';
setTimeout(() => {
body.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('${backgrounds[index-1]}')`;
body.style.opacity = '1';
}, 300);
}
// 页面加载时随机背景
window.onload = function() {
const randomIndex = Math.floor(Math.random() * backgrounds.length);
document.body.style.backgroundImage =
`linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('${backgrounds[randomIndex]}')`;
};
</script>
</body>
</html>
```
### 代码解释
1. **整体结构**：
- 使用HTML5语义化标签构建页面结构
- 响应式设计确保在不同设备上正常显示
- 模块化卡片布局展示不同类别信息
2. **自动填充背景图**：
- 使用CSS `background`属性设置全屏背景
- 添加深色渐变叠加层提高文字可读性
- JavaScript实现背景切换功能（四种不同风格的背景）
- 页面加载时随机选择背景图
3. **主要界面设计**：
- **个人信息卡片**：展示姓名、学号、年龄等基本信息
- **兴趣爱好卡片**：使用标签式展示足球等爱好，包含本周安排
- **个人目标卡片**：展示短期/中期/长期目标，包含技能进度条
- **背景控制区**：提供背景切换按钮
4. **设计特点**：
- 毛玻璃效果卡片（使用`backdrop-filter: blur(10px)`）
- 卡片悬停动画效果（上浮和阴影变化）
- 响应式网格布局（单列/多列自适应）
- 信息图标可视化设计
- 平滑的背景切换过渡动画
5. **交互功能**：
- 背景切换按钮
- 卡片悬停效果
- 页面加载动画
- 响应式布局调整
这个网站完全满足实训要求，展示了个人信息（姓名、学号、年龄、爱好）并实现了自动填充背景图功能，界面设计现代且用户友好。
本日记记录了2018年11月29日的一天，包括作者的日常活动，如早上陪同事进行咨询，下午研究onpenni编程简介，晚上参加团队会议并浏览orbbec代码。日记还提到了当天的饮食情况。
扫一扫
1155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
