提示词商城
AI 写作
图片
视频
热门角色
热门业务
模型专用
提示词工具
×
¥元
查看详情
首页 / OenAI提示词：单页网站生成器
🔥 会员专享 文生文 工具

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

👁️ 480 次查看
📅 Sep 1, 2025
💡 核心价值： 创建展示多样JavaScript特性的单页网站

🎯 可自定义参数（2个）

网站名称
生成的网站名称，例如：互动展示平台
展示功能
需要展示的交互功能，例如：下拉菜单、信息展示、动态按钮

🎨 效果示例

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

<!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 文件中，并根据需要修改项目内容、样式或链接。

以下是一个单页网站的 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 文件并运行。
  • 若需上线，请确保替换视频等资源路径为实际的资源路径。

以下是一个单页 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 文件，使用浏览器打开即可运行。

示例详情

📖 如何使用

⚡ 30秒出活：复制 → 粘贴 → 搞定
与其花几十分钟和AI聊天、试错，不如直接复制这些经过千人验证的模板，修改几个 {{变量}} 就能立刻获得专业级输出。省下来的时间，足够你轻松享受两杯咖啡！
加载中...
💬 不会填参数？让 AI 反过来问你
不确定变量该填什么？一键转为对话模式，AI 会像资深顾问一样逐步引导你，问几个问题就能自动生成完美匹配你需求的定制结果。零门槛，开口就行。
转为对话模式 →
🚀 告别复制粘贴，Chat 里直接调用
无需切换，输入 / 唤醒 8000+ 专家级提示词。 插件将全站提示词库深度集成于 Chat 输入框。基于当前对话语境，系统智能推荐最契合的 Prompt 并自动完成参数化，让海量资源触手可及，从此彻底告别"手动搬运"。
即将推出
🔌 接口一调，提示词自己会进化
手动跑一次还行，跑一百次呢？通过 API 接口动态注入变量，接入批量评价引擎，让程序自动迭代出更高质量的提示词方案。Prompt 会自己进化，你只管收结果。
发布 API →
🤖 一键变成你的专属 Agent 应用
不想每次都配参数？把这条提示词直接发布成独立 Agent，内嵌图片生成、参数优化等工具，分享链接就能用。给团队或客户一个"开箱即用"的完整方案。
创建 Agent →

✅ 特性总结

快速生成集成多种JavaScript特性的单页网站，直接保存为一个HTML文件，简化开发流程。
一键集成内嵌的JavaScript和CSS，无需外部资源加载，降低部署复杂度。
支持基于用户需求灵活定义网站名称和展示功能，自由定制网站结构。
提供高度自动化的代码生成体验，无需手动编写HTML、CSS、JavaScript，提升工作效率。
适用于产品展示、项目演示等场景，聚焦用户核心需求，快速完成任务。
减少开发技术门槛，即便非技术用户也能高效创建符合需求的网页设计。
优化内容展示和代码结构，确保生成的网站轻量、兼容性强。
灵活支持改动与二次开发，可根据输出代码快速调整页面内容和样式。
适合各种创意展示需求，轻松生成具有吸引力的网页效果。

🎯 解决的问题

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

🕒 版本历史

当前版本
v2.1 2024-01-15
优化输出结构，增强情节连贯性
  • ✨ 新增章节节奏控制参数
  • 🔧 优化人物关系描述逻辑
  • 📝 改进主题深化引导语
  • 🎯 增强情节转折点设计
v2.0 2023-12-20
重构提示词架构，提升生成质量
  • 🚀 全新的提示词结构设计
  • 📊 增加输出格式化选项
  • 💡 优化角色塑造引导
v1.5 2023-11-10
修复已知问题，提升稳定性
  • 🐛 修复长文本处理bug
  • ⚡ 提升响应速度
v1.0 2023-10-01
首次发布
  • 🎉 初始版本上线
COMING SOON
版本历史追踪，即将启航
记录每一次提示词的进化与升级，敬请期待。

💬 用户评价

4.8
⭐⭐⭐⭐⭐
基于 28 条评价
5星
85%
4星
12%
3星
3%
👤
电商运营 - 张先生
⭐⭐⭐⭐⭐ 2025-01-15
双十一用这个提示词生成了20多张海报，效果非常好！点击率提升了35%，节省了大量设计时间。参数调整很灵活，能快速适配不同节日。
效果好 节省时间
👤
品牌设计师 - 李女士
⭐⭐⭐⭐⭐ 2025-01-10
作为设计师，这个提示词帮我快速生成创意方向，大大提升了工作效率。生成的海报氛围感很强，稍作调整就能直接使用。
创意好 专业
COMING SOON
用户评价与反馈系统，即将上线
倾听真实反馈，在这里留下您的使用心得，敬请期待。
加载中...
敬请期待...