Spaces:
Running
Running
| <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://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .skill-category:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-bar { | |
| transition: width 1s ease-in-out; | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .accordion-content.show { | |
| max-height: 1000px; | |
| transition: max-height 0.5s ease-in; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <header class="text-center mb-16"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">专业开发测试工程师技能矩阵</h1> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| 资深开发测试工程师应掌握的知识、技能与能力全览 | |
| </p> | |
| </header> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> | |
| <!-- 核心测试技能 --> | |
| <div class="skill-category bg-white rounded-xl p-6 shadow-md transition-all duration-300 border-l-4 border-blue-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-vial text-blue-600 text-xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-semibold text-gray-800">核心测试技能</h2> | |
| </div> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>测试计划与策略制定</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>测试用例设计与文档编写</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>测试自动化框架搭建</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>手工与自动化测试技术</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>缺陷跟踪与管理</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- 技术能力 --> | |
| <div class="skill-category bg-white rounded-xl p-6 shadow-md transition-all duration-300 border-l-4 border-purple-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-code text-purple-600 text-xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-semibold text-gray-800">技术能力</h2> | |
| </div> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>编程语言(Java/Python/JavaScript等)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>API测试(REST/SOAP/GraphQL)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>数据库/SQL知识</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>CI/CD流程与工具</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>性能与负载测试</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- 测试类型 --> | |
| <div class="skill-category bg-white rounded-xl p-6 shadow-md transition-all duration-300 border-l-4 border-green-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-clipboard-check text-green-600 text-xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-semibold text-gray-800">测试类型</h2> | |
| </div> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>单元测试</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>集成测试</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>系统测试</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>回归测试</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>安全测试</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- 详细技能分解 --> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">详细技能分解</h2> | |
| <div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden"> | |
| <button class="accordion-header w-full flex justify-between items-center p-6 text-left font-semibold text-lg text-gray-800 hover:bg-gray-50 transition-colors"> | |
| <span>测试自动化专长</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="accordion-content"> | |
| <div class="px-6 pb-6 pt-2"> | |
| <div class="mb-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">自动化工具</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Selenium</span> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Cypress</span> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Playwright</span> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Appium</span> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">TestNG</span> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">JUnit</span> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Pytest</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">框架设计</h3> | |
| <p class="text-gray-600">能够设计和实现健壮、可维护的测试自动化框架，包括页面对象模型、数据驱动测试和行为驱动开发(BDD)方法。</p> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">CI/CD集成</h3> | |
| <p class="text-gray-600">熟悉将自动化测试集成到CI/CD流水线中，使用Jenkins、GitHub Actions、Azure DevOps或CircleCI等工具。</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden"> | |
| <button class="accordion-header w-full flex justify-between items-center p-6 text-left font-semibold text-lg text-gray-800 hover:bg-gray-50 transition-colors"> | |
| <span>性能测试</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="accordion-content"> | |
| <div class="px-6 pb-6 pt-2"> | |
| <div class="mb-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">工具与技术</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">JMeter</span> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Gatling</span> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Locust</span> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">k6</span> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">LoadRunner</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">关键能力</h3> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>设计与执行性能测试场景</li> | |
| <li>识别性能瓶颈</li> | |
| <li>分析系统在负载下的行为</li> | |
| <li>内存泄漏检测</li> | |
| <li>容量规划与可扩展性评估</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden"> | |
| <button class="accordion-header w-full flex justify-between items-center p-6 text-left font-semibold text-lg text-gray-800 hover:bg-gray-50 transition-colors"> | |
| <span>安全测试</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="accordion-content"> | |
| <div class="px-6 pb-6 pt-2"> | |
| <div class="mb-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">安全测试工具</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">OWASP ZAP</span> | |
| <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">Burp Suite</span> | |
| <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">Nessus</span> | |
| <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">Metasploit</span> | |
| <span class="bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">Nmap</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">安全知识</h3> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>OWASP Top 10漏洞</li> | |
| <li>认证与授权测试</li> | |
| <li>数据加密与保护</li> | |
| <li>安全编码实践</li> | |
| <li>合规标准(GDPR/HIPAA/PCI-DSS)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden"> | |
| <button class="accordion-header w-full flex justify-between items-center p-6 text-left font-semibold text-lg text-gray-800 hover:bg-gray-50 transition-colors"> | |
| <span>编程与开发</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="accordion-content"> | |
| <div class="px-6 pb-6 pt-2"> | |
| <div class="mb-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">语言与框架</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-3"> | |
| <div> | |
| <h4 class="font-medium text-gray-600 mb-1">Java</h4> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-600 mb-1">Python</h4> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-600 mb-1">JavaScript</h4> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-600 mb-1">C#</h4> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 70%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-600 mb-1">TypeScript</h4> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-600 mb-1">Bash/Shell</h4> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">开发实践</h3> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>版本控制(Git/SVN)</li> | |
| <li>代码审查与结对编程</li> | |
| <li>测试驱动开发(TDD)</li> | |
| <li>行为驱动开发(BDD)</li> | |
| <li>敏捷开发方法论</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden"> | |
| <button class="accordion-header w-full flex justify-between items-center p-6 text-left font-semibold text-lg text-gray-800 hover:bg-gray-50 transition-colors"> | |
| <span>DevOps与基础设施</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="accordion-content"> | |
| <div class="px-6 pb-6 pt-2"> | |
| <div class="mb-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">DevOps工具</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Docker</span> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Kubernetes</span> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Jenkins</span> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">GitHub Actions</span> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Azure DevOps</span> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Terraform</span> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Ansible</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">云平台</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">AWS</span> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Azure</span> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">GCP</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">基础设施知识</h3> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>容器化与编排</li> | |
| <li>监控与日志(Prometheus/Grafana/ELK)</li> | |
| <li>基础设施即代码(IaC)</li> | |
| <li>无服务器架构</li> | |
| <li>微服务测试策略</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion-item bg-white rounded-lg shadow-md mb-4 overflow-hidden"> | |
| <button class="accordion-header w-full flex justify-between items-center p-6 text-left font-semibold text-lg text-gray-800 hover:bg-gray-50 transition-colors"> | |
| <span>软技能与方法论</span> | |
| <i class="fas fa-chevron-down transition-transform"></i> | |
| </button> | |
| <div class="accordion-content"> | |
| <div class="px-6 pb-6 pt-2"> | |
| <div class="mb-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">沟通与协作</h3> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>清晰的技术文档编写</li> | |
| <li>有效的缺陷报告</li> | |
| <li>利益相关者沟通</li> | |
| <li>跨职能团队协作</li> | |
| <li>指导初级团队成员</li> | |
| </ul> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">方法论</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">敏捷</span> | |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Scrum</span> | |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Kanban</span> | |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">SAFe</span> | |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">瀑布模型</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">问题解决</h3> | |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> | |
| <li>根本原因分析</li> | |
| <li>复杂系统调试</li> | |
| <li>风险评估与缓解</li> | |
| <li>测试优化策略</li> | |
| <li>持续改进思维</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 附加知识领域 --> | |
| <div class="max-w-4xl mx-auto mt-12 bg-white rounded-xl shadow-md p-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">附加知识领域</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-mobile-alt text-blue-500 mr-2"></i> 移动端测试 | |
| </h3> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-blue-500 text-xs mt-2 mr-2"></i> | |
| <span>原生、混合和Web移动应用</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-blue-500 text-xs mt-2 mr-2"></i> | |
| <span>iOS和Android平台</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-blue-500 text-xs mt-2 mr-2"></i> | |
| <span>设备碎片化挑战</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-blue-500 text-xs mt-2 mr-2"></i> | |
| <span>模拟器与真实设备</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-database text-purple-500 mr-2"></i> 数据库测试 | |
| </h3> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-purple-500 text-xs mt-2 mr-2"></i> | |
| <span>SQL查询编写与优化</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-purple-500 text-xs mt-2 mr-2"></i> | |
| <span>数据完整性与验证</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-purple-500 text-xs mt-2 mr-2"></i> | |
| <span>存储过程测试</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-purple-500 text-xs mt-2 mr-2"></i> | |
| <span>性能调优</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-chart-line text-green-500 mr-2"></i> 测试指标与报告 | |
| </h3> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-green-500 text-xs mt-2 mr-2"></i> | |
| <span>缺陷密度与趋势</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-green-500 text-xs mt-2 mr-2"></i> | |
| <span>测试覆盖率分析</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-green-500 text-xs mt-2 mr-2"></i> | |
| <span>测试有效性指标</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-green-500 text-xs mt-2 mr-2"></i> | |
| <span>管理层报告仪表板</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-3 flex items-center"> | |
| <i class="fas fa-users text-red-500 mr-2"></i> 用户体验测试 | |
| </h3> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-red-500 text-xs mt-2 mr-2"></i> | |
| <span>无障碍标准(WCAG)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-red-500 text-xs mt-2 mr-2"></i> | |
| <span>可用性测试技术</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-red-500 text-xs mt-2 mr-2"></i> | |
| <span>跨浏览器兼容性</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-red-500 text-xs mt-2 mr-2"></i> | |
| <span>本地化与国际化</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 认证推荐 --> | |
| <div class="max-w-4xl mx-auto mt-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl shadow-md p-8 text-white"> | |
| <h2 class="text-2xl font-bold mb-6">推荐认证</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-white bg-opacity-10 p-4 rounded-lg backdrop-blur-sm"> | |
| <h3 class="font-semibold mb-2">ISTQB认证</h3> | |
| <ul class="space-y-1 text-blue-100"> | |
| <li>• 基础级认证(CTFL)</li> | |
| <li>• 高级测试分析师</li> | |
| <li>• 高级技术测试分析师</li> | |
| <li>• 测试自动化工程师</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-4 rounded-lg backdrop-blur-sm"> | |
| <h3 class="font-semibold mb-2">厂商特定认证</h3> | |
| <ul class="space-y-1 text-blue-100"> | |
| <li>• Selenium WebDriver认证</li> | |
| <li>• AWS认证DevOps工程师</li> | |
| <li>• Microsoft认证: Azure DevOps工程师</li> | |
| <li>• 认证ScrumMaster(CSM)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <p class="mb-4">专业测试工程师需要将技术专长、分析思维与强大沟通能力相结合</p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#" class="hover:text-blue-300 transition-colors"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="hover:text-blue-300 transition-colors"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| <a href="#" class="hover:text-blue-300 transition-colors"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="hover:text-blue-300 transition-colors"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| </a> | |
| </div> | |
| <p class="mt-4 text-gray-400 text-sm">© 2023 专业测试工程师技能矩阵</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // 手风琴功能 | |
| document.querySelectorAll('.accordion-header').forEach(header => { | |
| header.addEventListener('click', () => { | |
| const accordionItem = header.parentElement; | |
| const accordionContent = header.nextElementSibling; | |
| const icon = header.querySelector('i'); | |
| accordionContent.classList.toggle('show'); | |
| icon.classList.toggle('rotate-180'); | |
| // 关闭其他打开的手风琴 | |
| document.querySelectorAll('.accordion-item').forEach(item => { | |
| if (item !== accordionItem) { | |
| item.querySelector('.accordion-content').classList.remove('show'); | |
| item.querySelector('.accordion-header i').classList.remove('rotate-180'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // 页面加载时动画进度条 | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const progressBars = document.querySelectorAll('.progress-bar'); | |
| progressBars.forEach(bar => { | |
| // 触发回流以重新启动动画 | |
| void bar.offsetWidth; | |
| bar.style.width = bar.style.width; | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sacik72998/cs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |