OenAI提示词：单页网站生成器

幂简官方

66 浏览

5 试用

0 购买

Sep 1, 2025更新

工具文生文 OpenAI

创建展示多样JavaScript特性的单页网站

示例1

以下是一个实现您需求的单页网站 HTML 代码示例。它包含一个下拉菜单、项目列表和外部链接按钮，并将所有内容存储在一个 HTML 文件中，同时内嵌了 JavaScript 和 CSS。

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人项目展示</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #f7f9fc;
      color: #333;
    }

    header {
      background: #4CAF50;
      color: white;
      padding: 20px;
      text-align: center;
    }

    .container {
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
    }

    .dropdown {
      margin-bottom: 20px;
    }

    .dropdown select {
      width: 100%;
      padding: 10px;
      font-size: 16px;
    }

    .project-list {
      margin: 20px 0;
    }

    .project-item {
      background: #fff;
      border: 1px solid #ddd;
      padding: 15px;
      margin: 10px 0;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .project-item h3 {
      margin: 0 0 10px;
    }

    .project-item p {
      margin: 0 0 10px;
      color: #555;
    }

    .project-item a {
      display: inline-block;
      padding: 8px 12px;
      background: #007BFF;
      color: white;
      text-decoration: none;
      border-radius: 3px;
    }

    .project-item a:hover {
      background: #0056b3;
    }
  </style>
</head>
<body>
  <header>
    <h1>个人项目展示</h1>
  </header>

  <div class="container">
    <div class="dropdown">
      <label for="project-filter">选择项目类型：</label>
      <select id="project-filter">
        <option value="all">全部</option>
        <option value="web">网页项目</option>
        <option value="app">应用程序</option>
        <option value="others">其他</option>
      </select>
    </div>

    <div class="project-list" id="project-list">
      <div class="project-item" data-category="web">
        <h3>项目 1: 响应式网页设计</h3>
        <p>这是一个示例网页项目，用于展示响应式布局。</p>
        <a href="https://example.com" target="_blank">查看项目</a>
      </div>
      <div class="project-item" data-category="app">
        <h3>项目 2: 移动应用程序</h3>
        <p>这是一个简单的移动应用程序项目。</p>
        <a href="https://example.com" target="_blank">查看项目</a>
      </div>
      <div class="project-item" data-category="others">
        <h3>项目 3: 其他类型项目</h3>
        <p>这是一个属于其他分类的项目示例。</p>
        <a href="https://example.com" target="_blank">查看项目</a>
      </div>
    </div>
  </div>

  <script>
    document.getElementById('project-filter').addEventListener('change', function() {
      const filter = this.value;
      const projects = document.querySelectorAll('.project-item');
      
      projects.forEach(project => {
        if (filter === 'all' || project.getAttribute('data-category') === filter) {
          project.style.display = 'block';
        } else {
          project.style.display = 'none';
        }
      });
    });
  </script>
</body>
</html>
```

### 功能说明：
1. **下拉菜单**：
   - 位于页面顶部，用户可以选择筛选项目类型。
   - 包含 `全部`、`网页项目`、`应用程序` 和 `其他` 选项。

2. **项目列表**：
   - 展示多个项目，每个项目包括一个标题、描述和外部链接按钮。
   - 使用 `data-category` 属性标识项目类型，便于筛选。

3. **外部链接按钮**：
   - 每个项目条目都包含一个外部链接按钮，链接可替换为您的项目地址。

4. **响应式过滤功能**：
   - 使用 JavaScript 实现，基于下拉菜单选择过滤项目，动态显示或隐藏项目条目。

您可以将代码复制到一个 HTML 文件中，并根据需要修改项目内容、样式或链接。

示例2

以下是一个单页网站的 HTML 文件内容，包含你要求的功能：动态载入图片、产品视频展示、联系方式表单。所有内容以内嵌形式保存，独立于外部资源。

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创业产品展示</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      background-color: #f9f9f9;
      line-height: 1.6;
      color: #333;
    }
    header {
      background: #4CAF50;
      color: #fff;
      text-align: center;
      padding: 20px 10px;
    }
    header h1 {
      margin: 0;
    }
    .container {
      max-width: 1200px;
      margin: 20px auto;
      padding: 20px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .dynamic-images h2, .product-video h2, .contact-form h2 {
      margin: 0 0 10px;
    }
    .dynamic-images {
      margin-bottom: 20px;
    }
    .dynamic-images img {
      max-width: 100%;
      margin: 10px 0;
      display: block;
    }
    .product-video {
      margin-bottom: 20px;
    }
    .product-video video {
      width: 100%;
      height: auto;
    }
    .contact-form form {
      display: flex;
      flex-direction: column;
    }
    .contact-form label {
      margin-bottom: 5px;
      font-weight: bold;
    }
    .contact-form input, .contact-form textarea, .contact-form button {
      margin-bottom: 15px;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    .contact-form button {
      background: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
    .contact-form button:hover {
      background: #45a049;
    }
  </style>
</head>
<body>
  <header>
    <h1>创业产品展示</h1>
  </header>
  <div class="container">
    <!-- 动态载入图片 -->
    <section class="dynamic-images">
      <h2>动态载入图片</h2>
      <button onclick="loadImages()">加载更多图片</button>
      <div id="image-container">
        <!-- 图片将动态插入到这里 -->
      </div>
    </section>
    <!-- 产品视频展示 -->
    <section class="product-video">
      <h2>产品视频展示</h2>
      <video controls>
        <source src="product-demo.mp4" type="video/mp4">
        您的浏览器不支持视频播放功能，请升级浏览器。
      </video>
    </section>
    <!-- 联系方式表单 -->
    <section class="contact-form">
      <h2>联系方式</h2>
      <form id="contactForm" onsubmit="submitForm(event)">
        <label for="name">姓名</label>
        <input type="text" id="name" name="name" placeholder="请输入您的姓名" required>
        <label for="email">邮箱</label>
        <input type="email" id="email" name="email" placeholder="请输入您的邮箱" required>
        <label for="message">留言内容</label>
        <textarea id="message" name="message" placeholder="请输入您的留言" rows="5" required></textarea>
        <button type="submit">提交</button>
      </form>
    </section>
  </div>
  <script>
    // 动态加载图片
    function loadImages() {
      const imageContainer = document.getElementById('image-container');
      const images = [
        'https://via.placeholder.com/300x200?text=Image+1',
        'https://via.placeholder.com/300x200?text=Image+2',
        'https://via.placeholder.com/300x200?text=Image+3'
      ];
      images.forEach(url => {
        const img = document.createElement('img');
        img.src = url;
        img.alt = '动态图片';
        imageContainer.appendChild(img);
      });
    }

    // 提交表单并输出内容到控制台
    function submitForm(event) {
      event.preventDefault();
      const name = document.getElementById('name').value;
      const email = document.getElementById('email').value;
      const message = document.getElementById('message').value;
      console.log('表单提交信息:', { name, email, message });
      alert('表单提交成功！');
      // 可以将表单清空
      event.target.reset();
    }
  </script>
</body>
</html>
```

### 功能说明：
1. **动态加载图片**：
   - 点击“加载更多图片”按钮后，页面将动态插入图片。
   - 图片的 URL 使用了占位符图片服务 (`https://via.placeholder.com`)。

2. **产品视频展示**：
   - 包含一个嵌入的 `<video>` 播放器，可播放产品视频（替换 `product-demo.mp4` 为实际视频文件路径）。

3. **联系方式表单**：
   - 包括姓名、邮箱和留言三个输入字段，提交后会在控制台显示表单内容并弹窗提示成功。

### 使用说明：
- 将代码保存为一个 `.html` 文件并运行。
- 若需上线，请确保替换视频等资源路径为实际的资源路径。

示例3

以下是一个单页 HTML 网站代码示例，此代码包含用户反馈表单、动态滚动横幅以及分享至社交媒体的按钮。所有内容均在一个 HTML 文件中完成。

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>活动推广页</title>
  <style>
    /* 页面全局样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      line-height: 1.6;
    }

    header {
      background: #0078d7;
      color: white;
      text-align: center;
      padding: 20px 0;
    }

    header h1 {
      margin: 0;
    }

    .banner {
      background: #eee;
      color: #333;
      padding: 10px;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .banner p {
      display: inline-block;
      font-size: 18px;
      white-space: nowrap;
      animation: scrollText 10s linear infinite;
    }

    @keyframes scrollText {
      from {
        transform: translateX(100%);
      }
      to {
        transform: translateX(-100%);
      }
    }

    .container {
      padding: 20px;
      max-width: 600px;
      margin: 0 auto;
    }

    form {
      background: #f9f9f9;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    form label {
      display: block;
      margin-bottom: 10px;
      font-weight: bold;
    }

    form input[type="text"],
    form input[type="email"],
    form textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    form button {
      background: #0078d7;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 5px;
      cursor: pointer;
    }

    form button:hover {
      background: #005fa3;
    }

    .share-buttons {
      text-align: center;
      margin-top: 20px;
    }

    .share-buttons button {
      background: #0078d7;
      color: white;
      border: none;
      padding: 10px 20px;
      margin: 0 10px;
      border-radius: 5px;
      cursor: pointer;
    }

    .share-buttons button:hover {
      background: #005fa3;
    }

    footer {
      text-align: center;
      padding: 10px 0;
      background: #f1f1f1;
      color: #333;
      margin-top: 20px;
    }
  </style>
</head>
<body>

  <header>
    <h1>欢迎来到活动推广页</h1>
  </header>

  <div class="banner">
    <p>滚动播报：限时活动正在进行中！快来参与吧！</p>
  </div>

  <div class="container">
    <h2>用户反馈表单</h2>
    <form id="feedbackForm">
      <label for="name">姓名:</label>
      <input type="text" id="name" name="name" placeholder="请输入姓名">

      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email" placeholder="请输入邮箱">

      <label for="message">反馈信息:</label>
      <textarea id="message" name="message" placeholder="请输入您的反馈信息" rows="5"></textarea>

      <button type="button" onclick="submitFeedback()">提交反馈</button>
    </form>
  </div>

  <div class="share-buttons">
    <h3>分享至社交媒体</h3>
    <button onclick="shareTo('微信')">微信</button>
    <button onclick="shareTo('微博')">微博</button>
    <button onclick="shareTo('QQ')">QQ</button>
  </div>

  <footer>
    <p>© 2023 活动推广页. 版权所有.</p>
  </footer>

  <script>
    // 提交反馈表单
    function submitFeedback() {
      const name = document.getElementById('name').value;
      const email = document.getElementById('email').value;
      const message = document.getElementById('message').value;

      if (!name || !email || !message) {
        alert('请填写完整反馈信息！');
        return;
      }

      alert(`感谢您的反馈，${name}！我们会尽快处理您的意见！`);
      document.getElementById('feedbackForm').reset();
    }

    // 分享至社交媒体
    function shareTo(platform) {
      alert(`您正在分享至${platform}！感谢您的支持！`);
    }
  </script>
</body>
</html>
```

### 功能说明：
1. **动态滚动横幅（`.banner`）**：
   - 使用 CSS 的 `@keyframes` 实现滚屏效果。
   - 动画每 10 秒循环一轮。

2. **用户反馈表单**：
   - 包含姓名、邮箱、反馈信息三个输入框。
   - 提交按钮带有表单验证，点击后弹出提示框。

3. **分享至社交媒体按钮**：
   - 提供分享至微信、微博、QQ 的功能按钮。
   - 点击后弹出分享提示（`alert` 模拟）。

将此代码保存为一个 `.html` 文件，使用浏览器打开即可运行。

适用用户

自由职业开发者

帮助个人开发者快速创建高质量的单页网站，用于项目展示、上线实验等，无需花费时间编写重复代码。

创业者与初创团队

为没有技术开发团队的创业者提供简单易用的工具，快速创建网站展示产品理念和功能。

市场营销人员

在产品推广或活动宣传中快速创建视觉吸引力强的单页网站，用于收集用户反馈，完成转化目标。

教育与培训行业人士

为教师或培训师提供简便的网页生成方法，用于课程展示、学生项目演示或互动教学体验载体。

设计师或创意工作者

辅助设计师快速将创意转化为可交互的网页模型，用于提案或客户展示，减少与开发团队的协作成本。

解决的问题

帮助用户快速生成展示多样JavaScript特性的专业单页网站，简化开发流程，为用户提供高效、便捷的解决方案。

特征总结

• 快速生成集成多种JavaScript特性的单页网站，直接保存为一个HTML文件，简化开发流程。

• 一键集成内嵌的JavaScript和CSS，无需外部资源加载，降低部署复杂度。

• 支持基于用户需求灵活定义网站名称和展示功能，自由定制网站结构。

• 提供高度自动化的代码生成体验，无需手动编写HTML、CSS、JavaScript，提升工作效率。

• 适用于产品展示、项目演示等场景，聚焦用户核心需求，快速完成任务。

• 减少开发技术门槛，即便非技术用户也能高效创建符合需求的网页设计。

• 优化内容展示和代码结构，确保生成的网站轻量、兼容性强。

• 灵活支持改动与二次开发，可根据输出代码快速调整页面内容和样式。

• 适合各种创意展示需求，轻松生成具有吸引力的网页效果。

如何使用购买的提示词模板

1. 直接在外部 Chat 应用中使用

将模板生成的提示词复制粘贴到您常用的 Chat 应用（如 ChatGPT、Claude 等），即可直接对话使用，无需额外开发。适合个人快速体验和轻量使用场景。

2. 发布为 API 接口调用

把提示词模板转化为 API，您的程序可任意修改模板参数，通过接口直接调用，轻松实现自动化与批量处理。适合开发者集成与业务系统嵌入。

3. 在 MCP Client 中配置使用

在 MCP client 中配置对应的 server 地址，让您的 AI 应用自动调用提示词模板。适合高级用户和团队协作，让提示词在不同 AI 工具间无缝衔接。

免费

请先免费试用，确保满足您的需求。

立即试用，免费领取

您购买后可以获得什么

✓

获得完整提示词模板

- 共 53 tokens

- 2 个可调节参数

{ 网站名称 } { 展示功能 }

✓

自动加入"我的提示词库"

- 获得提示词优化器支持

- 版本化管理支持

✓

获得社区共享的应用案例

OenAI提示词：单页网站生成器

示例1

示例2

示例3

适用用户

自由职业开发者

创业者与初创团队

市场营销人员

教育与培训行业人士

设计师或创意工作者

解决的问题

特征总结

如何使用购买的提示词模板

1. 直接在外部 Chat 应用中使用

2. 发布为 API 接口调用

3. 在 MCP Client 中配置使用

您购买后可以获得什么

不要错过！

热门提示词

热门角色

热门业务

大模型API

使用我们的提示词工具

OenAI提示词：单页网站生成器

示例1

示例2

示例3

适用用户

自由职业开发者

创业者与初创团队

市场营销人员

教育与培训行业人士

设计师或创意工作者

解决的问题

特征总结

如何使用购买的提示词模板

1. 直接在外部 Chat 应用中使用

2. 发布为 API 接口调用

3. 在 MCP Client 中配置使用

您购买后可以获得什么

不要错过！

热门提示词

热门角色

热门业务

大模型API

使用我们的提示词工具

反馈问题