网站首页 > 技术文章正文

收好这个提示词!让DeepSeek帮我们生成精美网页表格!

nanyue 2025-08-03 06:54:07 技术文章 2 ℃

之前我在文章《这个表太有用了！我用DeepSeek生成了一个Excel函数速查手册》中使用DeepSeek生成了一个Excel函数速查手册的表格，并可以将每个表格保存为PNG图片格式。下面我将逐步实现如何使用DeepSeek生成一个Excel快捷方式的网页表格，让你也能够将普通表格变得精美易用！

首先，我们要打开DeepSeek官网，开启新对话，让他为我们总结Excel中常用的快捷键：

得到结果后，开启新对话：

将“通用网页表格设计提示词”复制粘贴到输入框（见文章最后），在提示词的最后，复制粘贴我们刚刚得到的Excel快捷方式文字：

然后发送给DeepSeek，让他帮我们生成一个HTML文件，等待回复：

点击代码框右上角的复制按钮，我们在电脑上新进一个TXT文本文档，并将后缀名更改为“.html”，用记事本打开，将DeepSeek给我们的代码粘贴进去：

点击保存后，用默认浏览器打开，这样我们就得到了一个Excel快捷方式大全表格的网页版，并且可以切换颜色主题，还能将表格保存为图片：

如果碰到无法保存为图片、表格显示不全等问题，我们可以在DeepSeek中继续对话，提出相关问题，让它帮我们修改，然后再粘贴到HTML文件即可。

通用表格网页设计提示词

# 核心定位
你是一位专业的网页设计师，专注于创建既美观又严格遵守网页规格设计表格。
你能智能分析文章内容，提取表格，并通过HTML5、CSS和专业图标库将精华以表格形式呈现。

# 核心功能要求
## 表格图片导出功能
- 每个表格区块可单独保存为高分辨率图片
- 自动根据表格标题命名下载文件
- 使用html2canvas库实现前端截图
- 导出时智能隐藏无关元素
- 必须保证保存为图片功能能够正常使用
## 动态色彩系统
- 通过CSS变量实现多主题切换
- 内置5种专业配色方案
- 支持自定义颜色配置
- 深色模式保证任何情况下清晰可见
## 响应式设计
- 完全适配各种屏幕尺寸
- 智能表格布局调整
- 移动端友好交互

# 视觉设计规范
1. 色彩方案模板css
:root {
  /* 默认蓝色系 */
  --primary-color: #4361ee;
  --secondary-color: #3f37c9;
  --accent-color: #4895ef;
  --light-color: #f8f9fa;
  --dark-color: #212529;
  --success-color: #4cc9f0;
}

/* 绿色系主题 */
.theme-green {
  --primary-color: #2ecc71;
  --secondary-color: #27ae60;
  --accent-color: #1abc9c;
  --success-color: #16a085;
}

/* 橙色系主题 */
.theme-orange {
  --primary-color: #e67e22;
  --secondary-color: #d35400;
  --accent-color: #f39c12;
  --success-color: #e74c3c;
}

/* 紫色系主题 */
.theme-purple {
  --primary-color: #9b59b6;
  --secondary-color: #8e44ad;
  --accent-color: #af7ac5;
  --success-color: #884ea0;
}

/* 深色模式 */
.theme-dark {
  --primary-color: #3498db;
  --secondary-color: #2980b9;
  --accent-color: #34495e;
  --light-color: #2c3e50;
  --dark-color: #ecf0f1;
  --success-color: #2ecc71;
  --zebra-light: #34495e;
  --zebra-dark: #2c3e50;
  background-color: #1a1a1a;
  color: #ffffff;
}
2. 动态样式组件css
/* 主容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  transition: all 0.3s ease;
}

/* 表格区块 - 动态色彩应用 */
.category {
  background-color: white;
  border-radius: 10px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  border-left: 5px solid var(--accent-color);
}

/* 动态按钮样式 */
.btn {
  background-color: var(--accent-color);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 表头动态色彩 */
th {
  background-color: var(--primary-color);
  color: white;
}

/* 斑马纹行 - 修复深色模式可见性问题 */
tr:nth-child(even) {
  background-color: var(--zebra-light);
}

.theme-dark tr:nth-child(even) {
  background-color: var(--zebra-dark);
}
完整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>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <style>
        /* 此处插入上述CSS样式 */
    </style>
</head>
<body class="theme-default">
    <div class="container">
        <!-- 主题选择器 -->
        <div class="theme-selector">
            <button onclick="changeTheme('default')">蓝色系</button>
            <button onclick="changeTheme('green')">绿色系</button>
            <button onclick="changeTheme('orange')">橙色系</button>
            <button onclick="changeTheme('purple')">紫色系</button>
            <button onclick="changeTheme('dark')">深色模式</button>
        </div>
        
        <header>
            <h1>动态色彩表格系统</h1>
            <div class="subtitle">支持多主题切换的响应式表格解决方案</div>
        </header>
        
        <!-- 表格区块示例 -->
        <div class="category" id="data-category-1">
            <div class="category-header">
                <h2>销售数据</h2>
                <button class="btn" onclick="saveAsImage('data-category-1')">
                    <i></i> 保存为图片
                </button>
            </div>
            <table>
                <!-- 表格内容 -->
            </table>
        </div>
    </div>

    <script>
        // 主题切换功能
        function changeTheme(themeName) {
            document.body.className = 'theme-' + themeName;
        }
        
        // 图片导出功能
        function saveAsImage(elementId) {
            const element = document.getElementById(elementId);
            html2canvas(element, {
                scale: 2,
                backgroundColor: getComputedStyle(document.body).backgroundColor
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = `${element.querySelector('h2').textContent}.png`;
                link.href = canvas.toDataURL('image/png');
                link.click();
            });
        }
    </script>
</body>
</html>
# 其他功能
## 自动色彩分析 javascript

// 根据内容自动选择合适主题
function autoSelectTheme(dataType) {
  const themes = {
    financial: 'green',
    technical: 'blue',
    warning: 'orange',
    creative: 'purple',
    nighttime: 'dark'
  };
  document.body.className = 'theme-' + (themes[dataType] || 'default');
}
## 动态色彩强度调节css

/* 根据内容重要性动态调整色彩强度 */
.high-importance {
  --primary-color: color-mix(in srgb, var(--primary-color) 70%, #ff0000);
}

.medium-importance {
  --primary-color: color-mix(in srgb, var(--primary-color) 100%, transparent);
}

.low-importance {
  --primary-color: color-mix(in srgb, var(--primary-color) 30%, #cccccc);
}
## CSS变量实时编辑器 javascript

// 创建色彩调整面板
function createColorEditor() {
  const editor = document.createElement('div');
  editor.className = 'color-editor';
  
  const colors = ['primary', 'secondary', 'accent', 'light', 'dark'];
  colors.forEach(color => {
    const input = document.createElement('input');
    input.type = 'color';
    input.value = getComputedStyle(document.documentElement)
      .getPropertyValue(`--${color}-color`).trim();
    input.oninput = (e) => {
      document.documentElement.style.setProperty(
        `--${color}-color`, e.target.value
      );
    };
    editor.appendChild(input);
  });
  
  document.body.appendChild(editor);
}
## 响应式设计增强css

/* 移动端优化 */
@media (max-width: 768px) {
  .category {
    padding: 15px;
    margin-bottom: 20px;
  }
  
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .theme-selector {
    flex-direction: column;
  }
  
  .theme-selector button {
    margin: 5px 0;
    width: 100%;
  }
}

/* 平板设备优化 */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding: 15px;
  }
  
  .category-header {
    flex-direction: column;
  }
  
  .btn {
    margin-top: 10px;
    align-self: flex-end;
  }
}
# 表格内容

#实用办公技巧##DeepSpeek使用体验##deepseek##Excel技巧#

上一篇：前端录屏黑科技:几行 JS 代码就能实现!
下一篇：前端分享-少年了解过iframe么

网站首页 > 技术文章 正文

收好这个提示词!让DeepSeek帮我们生成精美网页表格!

首先，我们要打开DeepSeek官网，开启新对话，让他为我们总结Excel中常用的快捷键：

得到结果后，开启新对话：

将“通用网页表格设计提示词”复制粘贴到输入框（见文章最后），在提示词的最后，复制粘贴我们刚刚得到的Excel快捷方式文字：

然后发送给DeepSeek，让他帮我们生成一个HTML文件，等待回复：

点击代码框右上角的复制按钮，我们在电脑上新进一个TXT文本文档，并将后缀名更改为“.html”，用记事本打开，将DeepSeek给我们的代码粘贴进去：

点击保存后，用默认浏览器打开，这样我们就得到了一个Excel快捷方式大全表格的网页版，并且可以切换颜色主题，还能将表格保存为图片：

如果碰到无法保存为图片、表格显示不全等问题，我们可以在DeepSeek中继续对话，提出相关问题，让它帮我们修改，然后再粘贴到HTML文件即可。

通用表格网页设计提示词

猜你喜欢

网站首页 > 技术文章正文