个人主页网页模板html一个简略的小我网站模板

模板效果展示：

主页 (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>© 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>© 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>© 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>© 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来查看你的个人网站。

学习利用，希望这对你有帮助把！
如果你有其他需求或须要进一步定制，请见告我。