个人静态页面
今天做了一个个人静态页面，用来放联系方式，我整理成了一个html文件，直接插入html区块就行，不用做其它的设置，css直接嵌入在html代码里面。
<!DOCTYPE html>
<html>
<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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
max-width: 900px;
width: 90%;
background: rgba(255, 255, 255, 0.95);
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
}
.profile {
text-align: center;
margin-bottom: 40px;
position: relative;
}
.profile-image {
width: 180px;
height: 180px;
border-radius: 50%;
margin-bottom: 20px;
border: 5px solid white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.profile-image:hover {
transform: scale(1.05);
}
.profile h1 {
font-size: 2.5em;
color: #2c3e50;
margin-bottom: 10px;
font-weight: 600;
}
.profile p {
color: #666;
font-size: 1.2em;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
.divider {
width: 60px;
height: 4px;
background: linear-gradient(90deg, #6366f1, #a855f7);
margin: 30px auto;
border-radius: 2px;
}
.icon-container {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 30px;
flex-wrap: wrap;
}
.icon-item {
cursor: pointer;
text-align: center;
padding: 15px;
border-radius: 12px;
transition: all 0.3s ease;
background: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
width: 100px;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
align-items: center;
}
.icon-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
.icon-item svg {
width: 35px;
height: 35px;
fill: #4f46e5;
transition: fill 0.3s ease;
}
.icon-item:hover svg {
fill: #6366f1;
}
.icon-tip {
margin-top: 8px;
font-size: 0.9em;
color: #4b5563;
font-weight: 500;
}
/* 弹窗样式 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
backdrop-filter: blur(5px);
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 30px;
border-radius: 20px;
text-align: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
max-width: 90%;
}
.modal-content img {
max-width: 300px;
max-height: 300px;
border-radius: 10px;
}
.close-btn {
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
font-size: 24px;
color: #666;
transition: color 0.3s ease;
}
.close-btn:hover {
color: #000;
}
@media (max-width: 768px) {
.container {
padding: 20px;
}
.profile h1 {
font-size: 2em;
}
.profile p {
font-size: 1em;
}
.icon-container {
gap: 15px;
}
.icon-item {
width: 80px;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="profile">
<img class="profile-image" src="https://redpeach.love/wp-content/uploads/2025/04/20250414110244209-touxiang.jpg" alt="个人头像">
<h1>Hello, I'm xiaochen</h1>
<div class="divider"></div>
<p>The only way to do great work is to love what you do. </p>
<p>热爱学习，热爱生活</p>
</div>
<div class="icon-container">
<!-- 邮箱图标 -->
<a class="icon-item" href="mailto:xiaochenio@163.com">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6c20.2 15.7 48.5 15.7 68.7 0L888 271.2l27.6-21.5-39.3-50.5-42.7 33.3z"/>
</svg>
<div class="icon-tip">邮箱</div>
</a>
<!-- 微信图标 -->
<div class="icon-item" onclick="showQRCode('wechat')">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M690.1 377.4c5.9 0 11.8.2 17.6.5-24.4-128.7-158.3-227.1-319.9-227.1C209 150.8 64 271.4 64 420.2c0 81.1 43.6 154.2 111.9 203.6a21.5 21.5 0 0 1 9.1 17.6c0 2.4-.5 4.6-1.1 6.9-5.5 20.3-14.2 52.8-14.6 54.3-.7 2.6-1.7 5.2-1.7 7.9 0 5.9 4.8 10.8 10.8 10.8 2.3 0 4.2-.9 6.2-2l70.9-40.9c5.3-3.1 11-5 17.2-5 3.2 0 6.4.5 9.5 1.4 33.1 9.5 68.8 14.8 105.7 14.8 6 0 11.9-.1 17.8-.4-7.1-21-10.9-43.1-10.9-66 0-135.8 132.2-245.8 295.3-245.8zm-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.4-43.1 43.2-43.1zm-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1zm586.8 415.6c56.9-41.2 93.2-102 93.2-169.7 0-124-120.8-224.5-269.9-224.5-149 0-269.9 100.5-269.9 224.5S540.9 847.5 690 847.5c30.8 0 60.6-4.4 88.1-12.3 2.6-.8 5.2-1.2 7.9-1.2 5.2 0 9.9 1.6 14.3 4.1l59.1 34c1.7 1 3.3 1.7 5.2 1.7 5 0 9.3-4.1 9.3-9.1 0-2.2-.8-4.3-1.4-6.1-.4-1.2-7.5-28.3-12.2-45.3-.5-1.9-.9-3.8-.9-5.7.1-5.9 3.1-11.2 7.6-14.5zM600.2 587.2c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c0 19.8-16.2 35.9-36 35.9zm179.9 0c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c-.1 19.8-16.2 35.9-36 35.9z"/>
</svg>
<div class="icon-tip">微信</div>
</div>
<!-- 打赏图标 -->
<div class="icon-item" onclick="showQRCode('donate')">
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M995.575172 725.451034c-12.358621-26.835862-38.488276-64.794483-92.689655-94.27862-62.146207-33.721379-136.297931-40.96-208.860689-20.303448l-99.928276 28.424827-279.304828-126.057931H22.775172v489.401379h509.704828l432.375172-195.266207c15.006897-6.708966 26.835862-19.42069 32.662069-34.957241 5.649655-15.36 4.943448-31.955862-1.942069-46.962759z m-482.162758 188.910345H111.051034V601.688276h184.673104l166.664828 75.387586-3.354483 0.882759h-170.372414v88.275862H471.393103l246.819311-70.267586c49.434483-14.124138 101.517241-9.357241 142.653793 12.888275 18.184828 9.886897 30.72 20.833103 39.371034 30.896552l-386.824827 174.609655z" p-id="4988"></path>
<path d="M695.437241 163.486897l58.615173-142.30069h-397.24138l66.736552 143.36c-121.82069 53.142069-207.095172 174.433103-207.095172 315.674483 0 28.601379 3.531034 57.202759 10.593103 84.744827l85.627586-21.715862c-5.12-20.48-7.768276-41.666207-7.768275-63.028965 0-141.241379 114.758621-256 256-256s256 114.758621 256 256c0 51.023448-14.830345 100.104828-43.078621 142.300689l73.268965 49.08138c37.958621-56.673103 58.085517-122.88 58.085518-191.382069-0.176552-141.947586-86.686897-264.121379-209.743449-316.733793zM467.508966 91.983448h180.965517l-21.009655 50.846897a348.16 348.16 0 0 0-66.913104-6.708966c-23.834483 0-46.962759 2.471724-69.384827 7.062069l-23.657931-51.2z" p-id="4989"></path>
<path d="M683.431724 427.431724v-70.62069h-38.311724l30.190345-30.190344-49.964138-49.964138-62.49931 62.49931h-6.002759L494.344828 276.656552l-49.787587 49.964138 30.013793 30.190344h-38.311724v70.62069h88.275862v35.310345h-88.275862v70.62069h88.275862v52.965517h70.62069v-52.965517h88.275862v-70.62069h-88.275862v-35.310345z" p-id="4990"></path>
</svg>
<div class="icon-tip">打赏</div>
</div>
</div>
</div>
<!-- 弹窗 -->
<div id="qrModal" class="modal">
<div class="modal-content">
<span class="close-btn" onclick="closeModal()">×</span>
<img id="qrImage" src="" alt="二维码">
</div>
</div>
<script>
function showQRCode(type) {
const modal = document.getElementById('qrModal');
const qrImage = document.getElementById('qrImage');
if (type === 'wechat') {
qrImage.src = 'https://redpeach.love/wp-content/uploads/2025/04/20250414110605479-weixin.png';
qrImage.alt = '微信二维码';
} else if (type === 'donate') {
qrImage.src = 'https://redpeach.love/wp-content/uploads/2025/04/20250414110602800-dashang.png';
qrImage.alt = '打赏二维码';
}
modal.style.display = 'block';
}
function closeModal() {
document.getElementById('qrModal').style.display = 'none';
}
// 点击弹窗外部关闭弹窗
window.onclick = function(event) {
const modal = document.getElementById('qrModal');
if (event.target == modal) {
modal.style.display = 'none';
}
}
</script>
</body>
</html>
版权声明：
作者：xiaochen
链接：https://xiaochen.red/50.html
文章版权归作者所有，未经允许请勿转载。
THE END
