一个简单的个人网站模板 一个简单的个人网站模板下载
gaoyangw 2024-10-11 12:34 17 浏览 0 评论
现在的网站效果多样而功能复杂，技术栈也多种多样，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>? 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来查看你的个人网站。
学习使用，希望这对你有帮助把！如果你有其他需求或需要进一步定制，请告诉我。
相关推荐
- 微信小程序如何推广获得流量，提升广告变现收益?
-
微信小程序推广能精准撬动用户增长，抓住用户，培养用户的忠诚度是所有产品的根本。#微信小程序#...
- 品牌活动策划:提升知名度与销量的关键
-
文章一开始就清楚指出，品牌活动的策划与传播是一门深奥的学问，对于提升品牌知名度、扩大销量等具有极其重要的意义。一次成功的策划与传播，不仅能吸引消费者的目光，还能在他们的心中留下美好的印象。接下来，我们...
- 上海商业推广方法解析:社交媒体与线下活动
-
上海商业气息浓郁，各种营销推广手段接连不断。以下将为大家逐一介绍几种常见的推广方法。社交媒体推广社交媒体对企业推广至关重要。在上海，微信、抖音、小红书等成了商家热捧的平台。有趣且有价值的帖子能吸引众多...
- 水果店如何通过线上平台拓展销售?多元化提升盈利
-
水果店借助线上平台拓展销售渠道，打破了地域局限，吸引了更广泛的顾客群体，显著提升了销售量。多样化的线上营销手段提升了品牌知名度，为水果店带来了更多盈利。1、搭建线上展示门面想要通过线上平台拓展水果店的...
- 揭秘“电诈之王” — 刷单诈骗!（电诈预警刷单类诈骗案例）
-
发案多！套路多变！...
- 刷单返利套路深度揭秘，谨防被骗!
-
“足不出户，日进斗金”“正规平台，诚邀刷单”...
- 腾讯QQ突然宣布:短视频功能不再支持!
-
腾讯QQ官方宣布，短视频功能将于2025年4月2日正式下线，用户将无法发布新作品或浏览他人视频。这一调整是QQ运营策略优化的一部分，旨在聚焦核心社交功能，同时整合腾讯内部资源。此次...
- 广点通广告有哪些投放平台?有哪些功能?
-
相信大家每天都在频繁的使用微信、QQ，刷朋友圈刷空间等，但是都不太清楚里面的一些广告类型，今天这篇文章，小编就带大家了解一下广点通广告有哪些投放平台？以及广告投放的功能介绍。广点通广告可自定义投放：...
- 谈谈我的初中线上兼职首篇之QQ拉人进群
-
初中时，我刚刚接触手机聊天软件，添加了形形色色的人，进入了各种各样的群聊，像互赞群（当时特别热衷于QQ上的各类互动，还喜爱刷赞，花几分钱就能刷好几千的赞，为此还专门搭建了副网站，却不知如何运营，最后荒...
- 如何为网站加入在线客服系统，监控在线访客，主动开展营销
-
最近陆续有许多小伙伴询问如何在自己的服务器上部署安装自己的在线客服系统，以达到100%私有化使用的目的。所以我决定把这个过程详细的整理出来，大家按步骤来即可。...
- 代理 IP 地址和端口实用手册:提升网络效率的秘籍
-
代理IP地址和端口在网络访问中扮演着重要角色，特别是在需要隐藏真实IP地址、突破地域限制或提高网络访问效率时。以下是一份详细的实用手册，帮助您从选择、配置到优化代理IP地址和端口，以提升网...
- 网络营销/越客单价高的生意，越要解决信任问题
-
网络营销/越客单价高的生意，越要解决信任问题回想跟客户的交易过程，我觉得信任是最重要的。不管是阿里运营，还是抖音短视频运营，又或者企业的全案营销，对企业来讲，都是对他企业的一个未来投资，销售渠道的拓展...
- 【营销策略】（营销策略的概念）
-
今早要送小孩去写字，吃粉就吃得晚了点，粉店里已没人在排队。我进店就说，一两汤切粉。老板娘从汤锅那边转过身来说，哦，二两嘛？我重复一遍，一两。待打得粉过来，老板娘一手抓肉，一手抓刀，问，要什么...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表