免费网页www大全代码官方版免费版免费下载，2026最新版

免费网页www大全代码合集整理了一个网页目录所需的基础结构、分类卡片和样式代码，可作为搭建网址导航页的起始资料。下面的源码按文件用途分段展示，复制后保存为 index.html 即可预览；示例中的名称与链接位置可替换为自己的分类和网址。

资源内容与文件结构

这套网页目录模板由页面主体和样式两部分组成。主体负责标题、分类和站点条目，样式负责卡片排列、间距、颜色及窄屏适配。示例采用静态 HTML 与 CSS，不依赖外部图片或脚本，适合先整理目录内容，再逐步补充站点入口。

• 页面主体：包含网页标题、介绍文字、分类区块和站点名称。
• 目录卡片：以分类标题和条目列表组织内容，便于查找与增删。
• 视觉样式：提供卡片边框、背景色、排版宽度与移动端布局。
• 替换位置：示例中的“站点名称”“分类名称”和 # 均为占位内容。

网页目录 HTML 主体代码

将下面代码保存为 index.html。每个 section 表示一个目录分类，列表中的链接地址需要替换成对应站点的网址；分类名称和说明也可按实际收录内容调整。

<!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 class="hero">
    <p class="eyebrow">实用网址整理</p>
    <h1>网页网址大全</h1>
    <p>按主题收录常用站点，快速找到所需入口。</p>
  </header>

  <main class="directory">
    <section class="group">
      <h2>学习与资料</h2>
      <ul class="link-list">
        <li><a href="#">站点名称一</a><p>填写简短用途说明</p></li>
        <li><a href="#">站点名称二</a><p>填写简短用途说明</p></li>
      </ul>
    </section>

    <section class="group">
      <h2>工具与设计</h2>
      <ul class="link-list">
        <li><a href="#">站点名称三</a><p>填写简短用途说明</p></li>
        <li><a href="#">站点名称四</a><p>填写简短用途说明</p></li>
      </ul>
    </section>
  </main>
  <footer><p>网页目录 · 按主题整理</p></footer>
</body>
</html>

配套 CSS 样式代码

把下方样式保存为同一目录中的 style.css，即可形成简洁的卡片式目录。页面宽度在较小屏幕上自动收缩，长站点名称也可正常换行。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #243247;
  background: #f4f7fb;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  line-height: 1.7;
}

.hero {
  padding: 48px 20px 36px;
  text-align: center;
  background: #e8f1ff;
}

.hero h1 {
  margin: 8px 0;
  font-size: 32px;
}

.eyebrow {
  color: #3972bd;
  letter-spacing: 2px;
}

.directory {
  width: min(960px, 92%);
  margin: 28px auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.group {
  padding: 22px;
  border: 1px solid #e1e8f0;
  border-radius: 12px;
  background: #fff;
}

.group h2 {
  margin-top: 0;
  font-size: 20px;
}

.link-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-list li {
  padding: 12px 0;
  border-top: 1px solid #edf0f4;
}

.link-list a {
  color: #2464ad;
  font-weight: 700;
  text-decoration: none;
}

.link-list a:hover {
  text-decoration: underline;
}

.link-list p {
  margin: 4px 0 0;
  color: #68778a;
  font-size: 14px;
}

footer {
  padding: 18px;
  color: #68778a;
  text-align: center;
}

@media (max-width: 640px) {
  .hero h1 { font-size: 26px; }
  .directory { grid-template-columns: 1fr; }
}

目录分类与条目整理表

搭建网址大全时，可以先按访问目的分组，再为每个条目补充名称和用途。下表提供一组适合放入模板的分类字段，具体站点由维护者自行填入对应链接。

替换与扩展说明

• 添加站点：复制一条 li 结构，修改站点名称、用途说明和 href 地址。
• 增加分类：复制整个 section 区块，替换标题后放入新的站点列表。
• 调整展示：修改 grid-template-columns 可改变桌面端列数；窄屏规则保留一列更便于阅读。
• 维护目录：用途说明保持简短，分类名称保持统一，重复或失效的条目及时从列表中移除。

以上免费网页www大全代码资料可直接作为静态网址目录的起点。将占位名称改成实际站点、补齐有效地址并保存样式文件后，即可得到结构清楚、适合继续扩充的网页大全模板。