1. 网站基础骨架：先搭出齐全页面

新建 index.html，用语义明确的区域划分页头、主体和页脚。视口设置让页面在窄屏设备上按屏幕宽度显示，形状则从单独的 style.css 文件加载。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的幼网站</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>网站名称</header>
  <main>重要内容放在这里</main>
  <footer>联系方式与版权注明</footer>
</body>
</html>

把文件保留后，直接用浏览器打开就能看到基础结构。后续新增栏目时，优先把内容放进 main，预防所有元素都挤在统一个区域里。

2. 页头导航：让栏目入口了如指掌

导航项使用站内锚点，点击后跳到对应板块。菜单名称能够改成“文章”“介绍”或“联系”，锚点名称则要和指标区域的 id 维持一致。

<header class="site-header">
  <strong class="brand">幼岛工作室</strong>
  <nav aria-label="主导航">
    <a href="#about">关于</a>
    <a href="#works">文章</a>
    <a href="#contact">联系</a>
  </nav>
</header>

例如，页面下方的介绍区域写成 <section id="about">，导航中的 #about 就会定位到那里。使用有寓意的栏目名称，比只写“栏目一、栏目二”更容易让访客找到指标。

3. 内容卡片：整齐展示多个条款

幼我文章集、服务介绍和文章提要都适合用卡片出现。每张卡片蕴含标题、简短注明和站内入口；复造 article 区块即可增长新条款。

<section class="cards" id="works">
  <article class="card">
    <h2>文章一</h2>
    <p>简要介绍这个项主张主题与特点。</p>
    <a href="#contact">相识更多</a>
  </article>
  <article class="card">
    <h2>文章二</h2>
    <p>补充另一项文章或服务的注明。</p>
    <a href="#contact">相识更多</a>
  </article>
</section>

两张卡片共用 card 类名，因而只需写一套形状。条款较多时，能够按主题拆成分歧区块，预防访客面对一长串内容时难以浏览。

4. 响应式形状：适配宽屏与手机屏幕

将下面规定写入 style.css？ㄆ褂猛穹至，宽屏下并排显示，屏幕变窄后自动收成一列；页头和正文也参与留白，让文字不贴着屏幕边缘。

* { box-sizing: border-box; }
body {
  margin: 0;
  color: #263238;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  line-height: 1.7;
}
.site-header, main, footer {
  width: min(100% - 32px, 960px);
  margin: 0 auto;
}
.site-header {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
}
nav { display: flex; gap: 16px; }
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.card {
  padding: 20px;
  border: 1px solid #dce3e8;
  border-radius: 12px;
}
@media (max-width: 600px) {
  .site-header { align-items: flex-start; gap: 12px; flex-direction: column; }
  .cards { grid-template-columns: 1fr; }
}

600px 是切换为单列布局的屏幕宽度，可按卡片内容调整。若标题较长或正文段落较多，单列卡片通常更易阅读；若每张卡片只有简短提要，也能够保留两列。

5. 页脚年份：用一行剧本自动更新

把年份节点放在页脚，再将剧本保留为 site.js 并在 HTML 文件实现前引入。年份会凭据接见时的日期更新，不用每年手动批改。

<footer>
  <p>? <span id="year"></span> 幼岛工作室</p>
</footer>
<script src="site.js"></script>

const yearNode = document.getElementById("year");
if (yearNode) {
  yearNode.textContent = new Date().getFullYear();
}