免费网站代码大全：常用网页搭建代码与使用说明

来源：界面新闻2026-07-30 22:17:35

字号

超大

大

标准

小

这份免费网站代码大全整理了静态网站最常用的页面结构、导航栏、卡片布局、响应式样式、按钮交互和表单校验代码。代码不依赖付费主题或外部📝框架，适合个人主页、企业介绍页、活动页、产🏭品展示页和简单的🔥内容网站使用。

使用时可以先复制基础页面结构，再按需加入 CSS 样式和 JavaScript 交互。静态页面可直接放到支持网页文件的🔥免费空间中；如果涉及登录、订单、数据库或用户资料，还需要后端程序、数据库和服务器环境，不能只靠前端代码完成。

一、免费网站代码的基本组成

一个能正常展示的网页，通常由三部分组成：HTML负责内容结构，CSS负责颜色、间距和布局，JavaScript负责点击、切换和表单提示。建议先完成结构，再调整样式，最后添加交互，这样更容易排查问题。

常见代码模块与适用场景
代码模块	主要作用	适用场景	使用注意
页面结构	组织标题、文字、图片和按钮	所有网站页面	内容层级要清晰，标题不要只用来改变字号
通用样式	设置字体、颜色、间距和宽度	个人站、展示站、落地页	优先适配手机屏幕
导航与菜单	帮助用户切换页面或定位内容	多页面网站、长页面	链接文字应能说明目标位置
表单校验	提前提示未填写或格式错误的内容	留言、报名、联系表单	前端校验不能替代服务器端校验

二、可直接使用的基础页面结构

下面的代码是一个简单的首页内容片段，包含网站标题、介绍文字、按钮和特色卡片。把代码保存🔥到网页文件中后，可将其中的文字替换成自己的品牌、产🏭品或服务信息。

<div class="site-shell">
  <div class="hero">
    <span class="eyebrow">专注于实用服务</span>
    <h1>让网站内容更清晰</h1>
    <p>这里填写网站的核心介绍，用一两句话说明你能解决什么问题。</p>
    <div class="hero-actions">
      <a class="button button-primary" href="#features">了解服务</a>
      <a class="button button-light" href="#contact">联系我们</a>
    </div>
  </div>

  <div class="feature-grid" id="features">
    <div class="feature-card">
      <h2>清晰展示</h2>
      <p>用简洁的内容介绍产品特点，减少用户理解成本。</p>
    </div>
    <div class="feature-card">
      <h2>方便维护</h2>
      <p>页面结构简单，修改文字和颜色不需要复杂工具。</p>
    </div>
    <div class="feature-card">
      <h2>适配手机</h2>
      <p>通过响应式布局，让不同尺寸的屏幕都能正常阅读。</p>
    </div>
  </div>
</div>

三、基础 CSS 样式与响应式布局

将以下样式放到页面的 CSS 文件中，或者放入页面已有的样式区域。颜色可以根据品牌视觉修改，宽度和间距则可根据内容长度调整。

* {
  box-sizing: border-box;
}

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

.site-shell {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
}

.hero {
  padding: 88px 24px;
  text-align: center;
  background: #eaf2ff;
  border-radius: 20px;
}

.eyebrow {
  color: #2563eb;
  font-size: 14px;
  font-weight: bold;
}

.hero h1 {
  margin: 12px 0;
  font-size: clamp(30px, 6vw, 56px);
  line-height: 1.2;
}

.hero p {
  max-width: 680px;
  margin: 0 auto 24px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}

.button-primary {
  color: #ffffff;
  background: #2563eb;
}

.button-light {
  color: #2563eb;
  background: #ffffff;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 28px 0;
}

.feature-card {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e5eaf2;
  border-radius: 14px;
}

@media (max-width: 720px) {
  .hero {
    padding: 56px 18px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }
}

四、简洁导航栏与手机菜单

当网站页面较多时，可以使用导航栏帮助用户访问首页、服务、关于我们和联系方式。下面的结构包含一个手机菜单按钮，桌面端显示完整导航，移动端可通过按钮切换菜单。

<div class="topbar">
  <strong class="brand">我的网站</strong>
  <button class="menu-button" data-menu-button type="button">菜单</button>
  <div class="menu" data-menu>
    <a href="#home">首页</a>
    <a href="#services">服务</a>
    <a href="#about">关于我们</a>
    <a href="#contact">联系方式</a>
  </div>
</div>

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}

.brand {
  color: #172554;
  font-size: 20px;
}

.menu {
  display: flex;
  gap: 18px;
}

.menu a {
  color: #334155;
  text-decoration: none;
}

.menu-button {
  display: none;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
}

@media (max-width: 640px) {
  .menu-button {
    display: block;
  }

  .menu {
    display: none;
    width: 100%;
    flex-direction: column;
    padding: 12px 0;
  }

  .menu.is-open {
    display: flex;
  }

  .topbar {
    flex-wrap: wrap;
  }
}

将以下 JavaScript 代码放到页面可执行 JavaScript 的位置，用于控制手机菜单的打开和关闭。代码会先判断元素是否存在，避免页面没有菜单时产生报错。

const menuButton = document.querySelector("[data-menu-button]");
const menu = document.querySelector("[data-menu]");

if (menuButton && menu) {
  menuButton.addEventListener("click", function () {
    menu.classList.toggle("is-open");
  });
}

五、常用联系表单😁与前端提示

联系表单适合收集姓名、邮箱和留言内容。前端校验可以减少空内容提交，但它只能改善用户体验，不能承📝担真正的数据安全责任。正式网站仍应在服务器端重新检查字段长度、格式和恶意内容。

<form data-contact-form>
  <label for="user-name">姓名</label>
  <input id="user-name" name="name" type="text" required>

  <label for="user-email">邮箱</label>
  <input id="user-email" name="email" type="email" required>

  <label for="user-message">留言</label>
  <textarea id="user-message" name="message" rows="5" required></textarea>

  <button type="submit">提交留言</button>
  <p data-form-message></p>
</form>

const form = document.querySelector("[data-contact-form]");
const message = document.querySelector("[data-form-message]");

if (form && message) {
  form.addEventListener("submit", function (event) {
    event.preventDefault();

    const name = form.elements.name.value.trim();
    const email = form.elements.email.value.trim();
    const content = form.elements.message.value.trim();

    if (!name || !email || !content) {
      message.textContent = "请完整填写表单内容。";
      return;
    }

    message.textContent = "内容已检查，可以继续提交。";
  });
}

六、按钮、图片和卡片的实用写法

网站中的图片应设置自然的替代文字，按🔥钮文字要明确表达动作，不建议大量使用“点击这里”这类缺乏信息的🔥词语。卡片内容较多时，应保持标题、说明和操作入口的层级一致。

<div class="product-card">
  <img src="images/product.jpg" alt="蓝色包装的产品展示图">
  <h2>基础服务方案</h2>
  <p>适合刚开始搭😁建网站的个人或小型团队。</p>
  <strong>按需咨询</strong>
  <a class="button button-primary" href="#contact">查看详情</a>
</div>

.product-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}

.product-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
}

.product-card .button {
  align-self: flex-start;
}