卡片项目管理(Web)（卡片设计的流程）
zhezhongyun 2025-07-06 18:04 3 浏览
简洁的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>
/* CSS变量定义 */
:root {
/* 浅色主题变量 */
--system-blue: #007AFF;
--system-gray-1: #F6F6F6;
--system-gray-2: #E5E5EA;
--system-gray-3: #D1D1D6;
--system-gray-4: #8E8E93;
--system-gray-5: #333333;
--system-red: #FF3B30;
--system-white: #FFFFFF;
--system-background: #FFFFFF;
--system-card-bg: rgba(255, 255, 255, 0.85);
--system-text-primary: #000000;
--system-text-secondary: #8E8E93;
--system-shadow: rgba(0, 0, 0, 0.1);
--system-border: rgba(0, 0, 0, 0.1);
--system-glass: rgba(255, 255, 255, 0.8);
--system-tint: rgba(0, 122, 255, 0.1);
--running-border: #007AFF;
}
/* 深色主题变量 */
.dark-theme {
--system-blue: #0A84FF;
--system-gray-1: #1C1C1E;
--system-gray-2: #2C2C2E;
--system-gray-3: #3A3A3C;
--system-gray-4: #8E8E93;
--system-gray-5: #F2F2F7;
--system-white: #000000;
--system-background: #000000;
--system-card-bg: rgba(28, 28, 30, 0.85);
--system-text-primary: #F2F2F7;
--system-text-secondary: #8E8E93;
--system-shadow: rgba(0, 0, 0, 0.3);
--system-border: rgba(255, 255, 255, 0.1);
--system-glass: rgba(28, 28, 30, 0.8);
--system-tint: rgba(10, 132, 255, 0.2);
--running-border: #0A84FF;
}
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.3s, color 0.3s, transform 0.2s, border 0.3s;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--system-background);
color: var(--system-text-primary);
line-height: 1.5;
min-height: 100vh;
padding-top: 44px; /* 导航栏44px */
}
/* iOS导航栏样式 */
.nav-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 44px;
padding: 0 16px;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--system-glass);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 1000;
border-bottom: 0.5px solid var(--system-border);
}
.nav-title {
font-size: 17px;
font-weight: 600;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.nav-btn {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--system-blue);
font-size: 16px;
cursor: pointer;
z-index: 1;
}
.nav-btn.add-btn {
font-weight: bold;
font-size: 24px;
margin-right: -8px;
}
/* 内容区域样式 */
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.section-title {
font-size: 34px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
}
/* 卡片网格布局 */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin-top: 20px;
}
/* iOS卡片样式 */
.card {
background: var(--system-card-bg);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px var(--system-shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 0.5px solid var(--system-border);
}
.card.running {
border: 2px solid var(--running-border);
box-shadow: 0 0 0 2px var(--system-tint), 0 4px 12px var(--system-shadow);
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 20px var(--system-shadow);
}
.card-header {
padding: 16px;
border-bottom: 0.5px solid var(--system-border);
display: flex;
align-items: center;
gap: 12px;
}
.card-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--system-blue), #5e5ce6);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 18px;
}
.card-title {
font-size: 17px;
font-weight: 600;
color: var(--system-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-content {
padding: 16px;
height: 120px;
overflow: hidden;
position: relative;
}
.card-content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background: linear-gradient(to top, var(--system-card-bg), transparent);
}
.card-content pre {
font-family: 'SF Mono', Menlo, monospace;
font-size: 13px;
margin: 0;
white-space: pre-wrap;
word-break: break-word;
color: var(--system-text-secondary);
opacity: 0.9;
max-height: 100%;
overflow: hidden;
}
.card-footer {
padding: 12px 16px;
display: flex;
justify-content: space-between;
border-top: 0.5px solid var(--system-border);
}
.card-date {
font-size: 13px;
color: var(--system-text-secondary);
}
.card-actions {
display: flex;
gap: 8px;
}
.card-btn {
padding: 6px 12px;
font-size: 14px;
border-radius: 8px;
background: var(--system-tint);
color: var(--system-blue);
border: none;
cursor: pointer;
font-weight: 500;
}
.card-btn:hover {
background: var(--system-blue);
color: white;
}
.delete-btn {
background: rgba(255, 59, 48, 0.1);
color: var(--system-red);
}
.delete-btn:hover {
background: var(--system-red);
color: white;
}
/* 空状态样式 */
.empty-state {
text-align: center;
padding: 60px 20px;
opacity: 0.6;
grid-column: 1 / -1;
}
.empty-state i {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
color: var(--system-text-secondary);
}
.empty-state p {
font-size: 17px;
max-width: 500px;
margin: 0 auto;
color: var(--system-text-secondary);
}
/* Safari浏览器模拟窗口 */
.safari-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 2000;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.safari-modal.active {
opacity: 1;
visibility: visible;
}
.safari-header {
height: 44px;
background: rgba(30, 30, 30, 0.9);
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
}
.safari-controls {
display: flex;
gap: 10px;
align-items: center;
}
.control-btn {
width: 14px;
height: 14px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: rgba(0, 0, 0, 0.7);
font-weight: bold;
}
.close-btn {
background: #ff5f57;
}
.minimize-btn {
background: #ffbd2e;
}
.edit-code-btn {
background: #28c940;
}
.safari-url-bar {
background: rgba(40, 40, 40, 0.6);
padding: 8px 15px;
border-radius: 8px;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.safari-url-bar::before {
content: '';
font-size: 16px;
}
.safari-content {
flex: 1;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.safari-iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 12px;
background: white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
/* 编辑模态框 */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
backdrop-filter: blur(5px);
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal-content {
background: var(--system-card-bg);
border-radius: 14px;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
transform: translateY(20px);
transition: transform 0.4s;
border: 0.5px solid var(--system-border);
}
.modal.active .modal-content {
transform: translateY(0);
}
.modal-header {
padding: 16px;
border-bottom: 0.5px solid var(--system-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-title {
font-size: 17px;
font-weight: 600;
}
.modal-close {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: var(--system-blue);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.modal-close:hover {
background: var(--system-tint);
}
.modal-body {
padding: 16px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 500;
font-size: 14px;
color: var(--system-text-secondary);
}
input, textarea {
width: 100%;
padding: 12px 15px;
border-radius: 10px;
border: 0.5px solid var(--system-border);
background: var(--system-card-bg);
color: var(--system-text-primary);
font-family: inherit;
font-size: 17px;
}
textarea {
min-height: 200px;
resize: vertical;
font-family: 'SF Mono', Menlo, monospace;
background: rgba(0, 0, 0, 0.05);
padding: 15px;
}
.dark-theme textarea {
background: rgba(255, 255, 255, 0.05);
}
.modal-footer {
padding: 16px;
display: flex;
justify-content: flex-end;
gap: 10px;
border-top: 0.5px solid var(--system-border);
}
.primary-btn {
padding: 10px 24px;
background: var(--system-blue);
color: white;
border: none;
border-radius: 10px;
font-size: 17px;
font-weight: 500;
cursor: pointer;
}
.secondary-btn {
padding: 10px 24px;
background: var(--system-gray-2);
color: var(--system-text-primary);
border: none;
border-radius: 10px;
font-size: 17px;
font-weight: 500;
cursor: pointer;
}
.import-btn {
width: 100%;
padding: 12px;
background: var(--system-tint);
color: var(--system-blue);
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
text-align: center;
margin-bottom: 15px;
}
.import-btn:hover {
background: var(--system-blue);
color: white;
}
/* 最小化窗口 */
.minimized-window {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background: #ffbd2e;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: black;
font-weight: bold;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
z-index: 999;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s, transform 0.3s;
}
.minimized-window.active {
opacity: 1;
transform: translateY(0);
}
/* 响应式调整 */
@media (max-width: 768px) {
.card-grid {
grid-template-columns: 1fr;
}
.section-title {
font-size: 28px;
}
.container {
padding: 16px;
}
}
@media (max-width: 480px) {
.nav-bar {
padding: 0 8px;
}
.section-title {
font-size: 24px;
}
}
</style>
</head>
<body>
<!-- iOS导航栏 -->
<div class="nav-bar">
<button class="nav-btn theme-toggle-btn">←</button>
<div class="nav-title">我的项目</div>
<button class="nav-btn add-btn">+</button>
</div>
<!-- 内容区域 -->
<div class="container">
<h1 class="section-title">项目卡片库</h1>
<div class="card-grid" id="projects-container">
<!-- 项目卡片将通过JS动态生成 -->
<div class="empty-state">
<div></div>
<p>暂无项目，点击右上角"+"按钮添加新项目</p>
</div>
</div>
</div>
<!-- 添加/编辑项目模态框 -->
<div class="modal" id="edit-modal">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">添加新项目</h2>
<button class="modal-close">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="project-title">项目名称</label>
<input type="text" id="project-title" placeholder="输入项目名称">
</div>
<div class="form-group">
<label for="project-code">HTML代码</label>
<textarea id="project-code" placeholder="粘贴您的HTML代码..."></textarea>
</div>
<button class="import-btn" id="import-file">
<span> 导入本地HTML文件</span>
<input type="file" id="file-input" accept=".html,.htm" style="display:none">
</button>
</div>
<div class="modal-footer">
<button class="secondary-btn" id="cancel-edit">取消</button>
<button class="primary-btn" id="save-project">保存</button>
</div>
</div>
</div>
<!-- Safari浏览器模拟窗口 -->
<div class="safari-modal" id="safari-modal">
<div class="safari-header">
<div class="safari-controls">
<div class="control-btn close-btn" id="safari-close">×</div>
<div class="control-btn minimize-btn" id="safari-minimize">-</div>
<div class="control-btn edit-code-btn" id="safari-edit">+</div>
</div>
<div class="safari-url-bar" id="safari-url">localhost/project.html</div>
</div>
<div class="safari-content">
<iframe class="safari-iframe" id="safari-iframe"></iframe>
</div>
</div>
<!-- 最小化窗口 -->
<div class="minimized-window" id="minimized-window">↗</div>
<script>
// DOM元素
const projectsContainer = document.getElementById('projects-container');
const editModal = document.getElementById('edit-modal');
const safariModal = document.getElementById('safari-modal');
const themeToggleBtn = document.querySelector('.theme-toggle-btn');
const addBtn = document.querySelector('.add-btn');
const minimizedWindow = document.getElementById('minimized-window');
const fileInput = document.getElementById('file-input');
const importBtn = document.getElementById('import-file');
// 状态变量
let currentEditIndex = -1;
let currentRunningProject = null;
let minimizedProject = null;
let cards = []; // 存储卡片DOM元素
// 初始化
document.addEventListener('DOMContentLoaded', () => {
// 加载主题设置
loadTheme();
// 加载存储的项目
loadProjects();
// 事件监听
addBtn.addEventListener('click', () => {
currentEditIndex = -1;
document.getElementById('project-title').value = '';
document.getElementById('project-code').value = '';
document.querySelector('#edit-modal .modal-title').textContent = '添加新项目';
openModal(editModal);
});
themeToggleBtn.addEventListener('click', toggleTheme);
document.querySelector('.modal-close').addEventListener('click', () => {
closeModal(editModal);
});
document.getElementById('cancel-edit').addEventListener('click', () => {
closeModal(editModal);
});
document.getElementById('save-project').addEventListener('click', saveProject);
// 文件导入处理
importBtn.addEventListener('click', () => {
fileInput.click();
});
fileInput.addEventListener('change', handleFileImport);
// Safari 控制按钮
document.getElementById('safari-close').addEventListener('click', () => {
safariModal.classList.remove('active');
document.getElementById('safari-iframe').src = '';
removeRunningHighlight();
currentRunningProject = null;
});
document.getElementById('safari-minimize').addEventListener('click', () => {
safariModal.classList.remove('active');
minimizedWindow.classList.add('active');
minimizedProject = currentRunningProject;
});
document.getElementById('safari-edit').addEventListener('click', () => {
if (currentRunningProject !== null) {
editProject(currentRunningProject.index);
}
});
minimizedWindow.addEventListener('click', () => {
minimizedWindow.classList.remove('active');
safariModal.classList.add('active');
minimizedProject = null;
});
});
// 主题功能
function toggleTheme() {
document.body.classList.toggle('dark-theme');
const isDarkMode = document.body.classList.contains('dark-theme');
localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
// 更新运行边框颜色
if (currentRunningProject) {
highlightRunningCard(currentRunningProject.index);
}
}
function loadTheme() {
const savedTheme = localStorage.getItem('theme') || 'light';
if (savedTheme === 'dark') {
document.body.classList.add('dark-theme');
}
}
// 项目管理功能
function loadProjects() {
const projects = JSON.parse(localStorage.getItem('projects') || '[]');
if (projects.length === 0) {
projectsContainer.innerHTML = `
<div class="empty-state">
<div></div>
<p>暂无项目，点击右上角"+"按钮添加新项目</p>
</div>
`;
return;
}
projectsContainer.innerHTML = '';
cards = [];
projects.forEach((project, index) => {
const card = createProjectCard(project, index);
projectsContainer.appendChild(card);
cards.push(card);
});
}
function createProjectCard(project, index) {
const card = document.createElement('div');
card.className = 'card';
card.dataset.index = index;
card.innerHTML = `
<div class="card-header">
<div class="card-icon">${project.title.charAt(0).toUpperCase()}</div>
<h3 class="card-title">${project.title}</h3>
</div>
<div class="card-content">
<pre>${escapeHtml(project.code.substring(0, 500))}${project.code.length > 500 ? '...' : ''}</pre>
</div>
<div class="card-footer">
<div class="card-date">${formatDate(project.date)}</div>
<div class="card-actions">
<button class="card-btn run-btn">运行</button>
<button class="card-btn edit-btn">编辑</button>
<button class="card-btn delete-btn">删除</button>
</div>
</div>
`;
card.querySelector('.run-btn').addEventListener('click', () => {
runProject(project.code, project.title, index);
});
card.querySelector('.edit-btn').addEventListener('click', () => {
editProject(index);
});
card.querySelector('.delete-btn').addEventListener('click', () => {
deleteProject(index);
});
return card;
}
function runProject(code, title, index) {
// 移除之前的高亮
removeRunningHighlight();
// 设置当前运行项目
currentRunningProject = { code, title, index };
// 高亮显示当前卡片
highlightRunningCard(index);
// 更新运行窗口
const blob = new Blob([code], {type: 'text/html'});
const iframe = document.getElementById('safari-iframe');
iframe.src = URL.createObjectURL(blob);
document.getElementById('safari-url').textContent = `localhost/${title.replace(/\s+/g, '-').toLowerCase()}.html`;
safariModal.classList.add('active');
minimizedWindow.classList.remove('active');
}
function highlightRunningCard(index) {
if (cards[index]) {
cards[index].classList.add('running');
}
}
function removeRunningHighlight() {
if (currentRunningProject && cards[currentRunningProject.index]) {
cards[currentRunningProject.index].classList.remove('running');
}
}
function editProject(index) {
const projects = JSON.parse(localStorage.getItem('projects') || '[]');
const project = projects[index];
if (!project) return;
currentEditIndex = index;
document.getElementById('project-title').value = project.title;
document.getElementById('project-code').value = project.code;
document.querySelector('#edit-modal .modal-title').textContent = '编辑项目';
openModal(editModal);
closeModal(safariModal);
}
function saveProject() {
const title = document.getElementById('project-title').value.trim();
const code = document.getElementById('project-code').value.trim();
if (!title || !code) {
alert('请填写项目名称和代码');
return;
}
const projects = JSON.parse(localStorage.getItem('projects') || '[]');
if (currentEditIndex >= 0) {
// 编辑现有项目
projects[currentEditIndex] = {
title,
code,
date: new Date().toISOString()
};
// 如果当前正在运行的是编辑的项目，更新运行内容
if (currentRunningProject && currentRunningProject.index === currentEditIndex) {
currentRunningProject.code = code;
const iframe = document.getElementById('safari-iframe');
const blob = new Blob([code], {type: 'text/html'});
iframe.src = URL.createObjectURL(blob);
}
} else {
// 添加新项目
projects.push({
title,
code,
date: new Date().toISOString()
});
}
localStorage.setItem('projects', JSON.stringify(projects));
closeModal(editModal);
loadProjects();
}
function deleteProject(index) {
if (!confirm('确定要删除这个项目吗？')) return;
const projects = JSON.parse(localStorage.getItem('projects') || '[]');
// 如果删除的是当前正在运行的项目，关闭运行窗口
if (currentRunningProject && currentRunningProject.index === index) {
safariModal.classList.remove('active');
document.getElementById('safari-iframe').src = '';
currentRunningProject = null;
}
projects.splice(index, 1);
localStorage.setItem('projects', JSON.stringify(projects));
loadProjects();
}
function handleFileImport(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(event) {
document.getElementById('project-code').value = event.target.result;
// 自动设置项目名为文件名（不含扩展名）
const fileName = file.name.replace(/\.[^/.]+$/, "");
document.getElementById('project-title').value = fileName;
};
reader.readAsText(file);
// 重置input，允许再次选择相同文件
e.target.value = '';
}
// 工具函数
function openModal(modal) {
modal.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeModal(modal) {
modal.classList.remove('active');
document.body.style.overflow = '';
}
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
function formatDate(isoString) {
const date = new Date(isoString);
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
}
</script>
</body>
</html>相关推荐
- 激光手术矫正视力对眼睛到底有没有伤害?
-
因为大家询问到很多关于“基质不能完全愈合”的问题，有必要在这里再详细解释一下。谢谢@珍惜年少时光提出的疑问：因为手头刚好在看组织学，其中提到：”角膜基质约占角膜的全厚度的90%，主要成分是胶原板层，...
- OneCode核心概念解析——View(视图)
-
什么是视图？在前面的章节中介绍过，Page相关的概念，Page是用户交互的入口，具有Url唯一性。但Page还只是一个抽象的容器，而View则是一个具备了具体业务能力的特殊的Page,它可以是一个...
- 精品博文图文详解Xilinx ISE14.7 安装教程
-
在软件安装之前，得准备好软件安装包，可从Xilinx官网上下载：http://china.xilinx.com/support/download/index.html/content/xilinx/z...
- 卡片项目管理(Web)（卡片设计的流程）
-
简洁的HTML文档卡片管理，简单框架个人本地离线使用。将个人工具类的文档整理使用。优化方向：添加图片、瀑布式布局、颜色修改、毛玻璃效果等。<!DOCTYPEhtml><html...
- GolangWeb框架Iris项目实战-JWT和中间件(Middleware)的使用EP07
-
前文再续，上一回我们完成了用户的登录逻辑，将之前用户管理模块中添加的用户账号进行账号和密码的校验，过程中使用图形验证码强制进行人机交互，防止账号的密码被暴力破解。本回我们需要为登录成功的用户生成Tok...
- sitemap 网站地图是什么格式?有什么好处?
-
sitemap网站地图方便搜索引擎发现和爬取网页站点地图是一种xml文件，或者是txt，是将网站的所有网址列在这个文件中，为了方便搜索引擎发现并收录的。sitemap网站地图分两种：用于用户导...
- 如何在HarmonyOS NEXT中处理页面间的数据传递?
-
大家好，前两天的Mate70的发布，让人热血沸腾啊，不想错过，自学的小伙伴一起啊，今天分享的学习笔记是关于页面间数据伟递的问题，在HarmonyOSNEXT5.0中，页面间的数据传递可以有很多种...
- 从 Element UI 源码的构建流程来看前端 UI 库设计
-
作者：前端森林转发链接：https://mp.weixin.qq.com/s/ziDMLDJcvx07aM6xoEyWHQ引言由于业务需要，近期团队要搞一套自己的UI组件库，框架方面还是Vue。而业界...
- jq+ajax+bootstrap改了一个动态分页的表格
-
最近在维护一个很古老的项目，里面是用jq的dataTable方法实现一个分页的表格，不过这些表格的分页是本地分页。现在想要的是点击分页去请求数据。经过多次的修改，以失败告终。分页的不准确，还会有这个错...
- 学习ES6- 入门Vue(大量源代码及笔记，带你起飞)
-
ES6学习网站：https://es6.ruanyifeng.com/箭头函数普通函数//普通函数this指向调用时所在的对象(可变)letfn=functionfn(a,b){...
- 青锋微服务架构之-Ant Design Pro 基本配置
-
青锋(msxy)-Gitee.com1、更换AntDesignPro的logo和名称需要修改文件所在位置：/config/defaultSetting.jsconstproSett...
- 大数据调度服务监控平台（大数据调度服务监控平台官网）
-
简介SmartKettle是针对上述企业的痛点，对kettle的使用做了一些包装、优化，使其在web端也能具备基础的kettle作业、转换的配置、调度、监控，能在很大一定程度上协助企业完成不同...
- Flask博客实战 - 实现博客首页视图及样式
-
本套教程是一个Flask实战类教程，html/css/javascript等相关技术栈不会过多的去详细解释，那么就需要各位初学者尽可能的先去掌握这些基础知识，当然本套教程不需要你对其非常精通，但最起码...
- Web自动化测试:模拟鼠标操作(ActionChains)
-
在日常的测试中，经常会遇到需要鼠标去操作的一些事情，比如说悬浮菜单、拖动验证码等，这一节我们来学习如何使用webdriver模拟鼠标的操作首页模拟鼠标的操作要首先引入ActionChains的包fro...
- DCS F-16C 中文指南 16.9ILS仪表降落系统教程
-
10–ILS教程我们的ILS（仪表着陆进近）将到达Batumi巴统机场。ILS频率：110.30跑道航向：120磁航向/126真航向无线电塔频率：131.0001.设置雷达高度表开关打开（前）并...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)