功能介绍 源代码在文章最后面
1.界面有:个人简介、项目作品、技能列表(带柱状图)、联系方式、社交媒体链接
2.界面最后有留言板块,可向服务器发送留言数据。
效果展示
源代码
<!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>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 20px 0;
border-bottom: 1px solid #ddd;
}
header h1 {
margin: 0;
color: #007bff;
}
section {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 20px 0;
border: 1px solid #ddd;
}
h2 {
color: #007bff;
}
.skills {
display: flex;
justify-content: center;
align-items: center;
}
.skill-chart {
width: 100%;
max-width: 600px;
height: 400px;
}
.contact-info, .social-links {
list-style: none;
padding: 0;
}
.contact-info li, .social-links li {
margin-bottom: 10px;
}
.button {
display: inline-block;
padding: 10px 20px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
}
.contact-form {
display: flex;
flex-direction: column;
}
.contact-form input, .contact-form textarea {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="container">
<header>
<h1>我的个人主页</h1>
</header>
<section>
<h2>个人简介</h2>
<p>这里是我的个人简介。</p>
</section>
<section>
<h2>项目作品</h2>
<div class="project">
<h3>项目 1</h3>
<p>项目 1 的描述。</p>
</div>
<div class="project">
<h3>项目 2</h3>
<p>项目 2 的描述。</p>
</div>
</section>
<section>
<h2>技能列表</h2>
<div class="skills">
<canvas id="skillsChart" class="skill-chart"></canvas>
</div>
</section>
<section>
<h2>联系方式</h2>
<ul class="contact-info">
<li>电子邮件:example@example.com</li>
<li>电话:123-456-7890</li>
</ul>
</section>
<section>
<h2>社交媒体链接</h2>
<ul class="social-links">
<li><a href="https://twitter.com/yourprofile" target="_blank">Twitter</a></li>
<li><a href="https://linkedin.com/in/yourprofile" target="_blank">LinkedIn</a></li>
</ul>
</section>
<section>
<h2>留言</h2>
<form class="contact-form" onsubmit="sendMessage(event)">
<input type="text" name="name" placeholder="你的名字" required>
<input type="email" name="email" placeholder="你的电子邮件" required>
<textarea name="message" rows="5" placeholder="你的留言" required></textarea>
<button type="submit" class="button">发送留言</button>
</form>
</section>
</div>
<script>
function sendMessage(event) {
event.preventDefault();
const form = event.target;
const data = {
name: form.name.value,
email: form.email.value,
message: form.message.value
};
fetch('http://38.14.250.184', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
alert('留言发送成功!');
}
document.addEventListener('DOMContentLoaded', function () {
const ctx = document.getElementById('skillsChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['JavaScript', 'C++', 'Java'],
datasets: [
{
label: '已掌握',
data: [70, 60, 80],
backgroundColor: '#007bff',
borderColor: '#007bff',
borderWidth: 1,
borderRadius: 10 // 圆角半径
},
{
label: '未掌握',
data: [30, 40, 20],
backgroundColor: '#ddd',
borderColor: '#ddd',
borderWidth: 1,
borderRadius: 10 // 圆角半径
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
stacked: true
},
y: {
stacked: true,
beginAtZero: true,
max: 100
}
},
plugins: {
legend: {
display: true,
position: 'bottom'
}
},
layout: {
padding: 10
}
}
});
});
</script>
</body>
</html>