这组网站代码把基础结构、导航、作品展示、样式和简朴交互组合在一个文件中 ，适合搭建小我私家先容站或小型事情室网站。将下面代码生涯为 index.html ，再用浏览器翻开 ，即可审查完整效果。代码中的文字和项目名称都可以替换成自己的内容。
可直接运行的网站代码
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的作品集</title>
<style>
*{box-sizing:border-box}
body{margin:0;font:16px/1.7 Arial,"Microsoft YaHei",sans-serif;color:#243047;background:#f5f7fb}
header{display:flex;justify-content:space-between;align-items:center;padding:18px 8%;background:#fff}
.logo{font-weight:700;color:#3157c8}
nav a{margin-left:20px;color:#34415a;text-decoration:none}
main{max-width:960px;margin:auto;padding:32px 20px}
section{margin:24px 0;padding:28px;border-radius:16px;background:#fff}
.hero{padding:48px 32px;background:#eaf0ff}
h1,h2{line-height:1.3}.hero p{max-width:620px;color:#53617a}
.button{padding:10px 16px;border:0;border-radius:8px;background:#3157c8;color:#fff;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{padding:18px;border:1px solid #e5e9f2;border-radius:12px}
footer{text-align:center;padding:24px;color:#68748a}
.dark{background:#182033;color:#edf1fa}
.dark section,.dark header{background:#232e45;color:#edf1fa}
.dark nav a,.dark .hero p{color:#d2dbef}
@media(max-width:620px){header{align-items:flex-start;gap:12px;flex-direction:column}nav a{margin:0 14px 0 0}.grid{grid-template-columns:1fr}.hero{padding:30px 22px}}
</style>
</head>
<body>
<header>
<div class="logo">林间事情室</div>
<nav>
<a href="#projects">作品</a>
<a href="#about">关于</a>
<a href="#contact">联系</a>
</nav>
</header>
<main>
<section class="hero">
<h1>你好 ，我是林间</h1>
<p>我专注于精练、易用的网页设计与前端制作 ，接待浏览我的项目。</p>
<button class="button" id="themeButton">切换显示主题</button>
</section>
<section id="projects">
<h2>精选作品</h2>
<div class="grid">
<article class="card"><h3>都会咖啡馆</h3><p>为社区咖啡店制作的品牌展示页。</p></article>
<article class="card"><h3>阅读清单</h3><p>利便整理书目与阅读进度的小工具。</p></article>
<article class="card"><h3>周末墟市</h3><p>展示摊位、活动安排与加入指南。</p></article>
</div>
</section>
<section id="about">
<h2>关于我</h2>
<p>我喜欢把重大需求拆成清晰的栏目 ，再用轻量代码实现。这里可以增补手艺、履历或效劳先容。</p>
</section>
<section id="contact">
<h2>联系我</h2>
<p>接待通过你的常用联系方法交流相助。</p>
</section>
</main>
<footer>? 林间事情室 · 小我私家作品集</footer>
<script>
document.getElementById("themeButton").addEventListener("click", function () {
document.body.classList.toggle("dark");
});
</script>
</body>
</html>8个基础 ？榛肿鍪裁
- 文档骨架：
doctype、语言属性和字符编码告诉浏览器怎样剖析文件 ，也让中文正常显示。 - 页首与导航：品牌名称放在左侧 ，导航锚点跳转到作品、关于和联系栏目 ；项目逐渐增多时 ，访客仍能快速定位。
- 先容主视觉：问题、简介和主题按钮集中泛起站点主人的身份、效劳偏向 ，以及可执行的主题切换操作。
- 作品卡片：每个
article展示一个项目 ，问题与简短说明利便访客快速浏览和较量咖啡馆展示页、阅读工具与墟市指南。 - 小我私家先容：用详细文字增补主视觉未睁开的手艺、履历或效劳 ，让访客相识林间的事情方法。
- 联系区与页脚：联系区提醒怎样相同 ，页脚标出事情室名称 ；宣布前可替换为现实联系方法和品牌名称。
- 样式与适配：CSS 设置颜色、间距、卡片结构和窄屏显示 ；视口宽度低于
620px时 ，作品卡片自动改为单列。 - 主题交互：JavaScript 监听按钮点击 ，为正文切换
dark类名 ，实现明暗主题切换 ，不依赖特殊库。
替换内容时的几个要点
先修改问题、品牌名和各栏目先容 ，再替换作品卡片中的项目名称与说明。导航里的 href="#projects" 要与对应栏目的 id="projects" 坚持一致 ，这样点击“作品”后才华跳到作品卡片区域。颜色可从 CSS 中的色值调解 ；若是暂时不需要主题切换 ，可以同时删除主题按钮和末尾的交互代码。整个示例只有一个 HTML 文件 ，适合先搭好栏目结构 ，再逐步增添图片、作品卡片或新的先容区块。
