收好这个提示词!让DeepSeek帮我们生成精美网页表格!
文章标签：
html 插入图片
之前我在文章《这个表太有用了！我用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;
}
}
# 表格内容