现在的网站效果多样而功能复杂，技术栈也多种多样，react\vue\jquery等层出不穷，对于编程爱好者初学者入门极不友好。我这里有一个简单的个人网站模板，包括主页、项目和联系方式、关于我四个部分。你可以根据自己的需求进行调整。
模板效果展示：
主页 (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的个人网站</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="projects.html">项目</a></li>
<li><a href="contact.html">联系方式</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h1>欢迎来到我的个人网站</h1>
<p>我是一个充满激情的程序员，热衷于学习和分享知识。</p>
</section>
</main>
<footer>
<p>(c) 2024 我的名字</p>
</footer>
</body>
</html>关于我 (about.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关于我 - 我的个人网站</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="projects.html">项目</a></li>
<li><a href="contact.html">联系方式</a></li>
</ul>
</nav>
</header>
<main>
<section class="about">
<h1>关于我</h1>
<p>你好！我是[一周一志程序员]，一名经验丰富的Java程序员，致力于能源电力SaaS和系统架构设计。</p>
<p>目前我正在备考2024年11月6日的《系统架构设计师》考试，并在着手成为独立开发者，轻创业准备中。</p>
</section>
</main>
<footer>
<p>(c) 2024 一周一志程序员</p>
</footer>
</body>
</html>项目 (projects.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>项目 - 我的个人网站</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="projects.html">项目</a></li>
<li><a href="contact.html">联系方式</a></li>
</ul>
</nav>
</header>
<main>
<section class="projects">
<h1>项目</h1>
<ul>
<li><strong>电力SaaS平台开发</strong> - 开发用电考核模块。</li>
<li><strong>系统架构设计</strong> - 为不同客户提供系统架构解决方案。</li>
<li><strong>Spring Boot 项目</strong> - 创建和管理多个Spring Boot项目。</li>
</ul>
</section>
</main>
<footer>
<p>(c) 2024 我的名字</p>
</footer>
</body>
</html>联系方式 (contact.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>联系方式 - 我的个人网站</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="projects.html">项目</a></li>
<li><a href="contact.html">联系方式</a></li>
</ul>
</nav>
</header>
<main>
<section class="contact">
<h1>联系方式</h1>
<p>如果你有任何问题或合作意向，请随时联系我。</p>
<p>Email: <a href="mailto:1184795629@qq.com">your-email@domain.com</a></p>
<p>公众号: <a href="#">一周一志程序员</a></p>
<p>抖音: <a href="#">麦冬会开花</a></p>
</section>
</main>
<footer>
<p>(c) 2024 我的名字</p>
</footer>
</body>
</html>样式文件 (styles.css)
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background: #06362B;
color: #fff;
padding: 1rem 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 1rem;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
.hero {
background: #f4f4f4;
padding: 2rem;
text-align: center;
}
.about, .projects, .contact {
padding: 2rem;
}
footer {
background: #06362B;
color: #fff;
text-align: center;
padding: 1rem 0;
position: fixed;
width: 100%;
bottom: 0;
}你可以将这些文件保存为index.html、about.html、projects.html、contact.html和styles.css，并将它们放在同一目录下。然后，你可以通过浏览器打开index.html来查看你的个人网站。
学习使用，希望这对你有帮助把！如果你有其他需求或需要进一步定制，请告诉我。