前端练习项目：html css js 开发AI数字人平台官网前端静态页面
今天分享一个最近练习的一个前端静态网站项目：AI数字人平台官网前端静态页面
最近到处都可以看到关于AI的产品，我觉得未来每个人都离不开AI的使用。
今天就分享一个关于AI数字人的前端静态网站，如果你是学习前端，或者你想宣传自己的 AI数字人产品
希望这篇文章能对你有所帮助。
对于刚刚学习前端的小伙伴。html css 和js 是入门前端的基础知识，如果我们想熟练的掌握前端开发，
必须要多写一些关于前端代码的项目，更好的让我们学到的前端知识应用于实践中。
所以在刚刚开始学习前端的时候，我们除了学习基础编程知识点，还需要比较完整的项目用于练习，这样
我们才能让我们学到的东西记忆更加深刻。
好了，别的就不在说了，接下来 就直接分享 关于这个前端静态网站的代码 和 效果
使用的技术：html css 和 js（javascript）
主要分享 以下几个菜单导航
首页
代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI数字人平台 - 首页</title>
<link rel="stylesheet" href="assets/index.css">
</head>
<body>
<header class="header">
<div class="header-left">
<!-- <img src="assets/images/logo.png" alt="logo" class="logo"> -->
<span class="brand-text">数字人(静态网站模板)</span>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html" class="active">首页</a></li>
<li><a href="clone.html">数字人克隆</a></li>
<li><a href="create.html">数字人视频创作</a></li>
<li><a href="help.html">帮助中心</a></li>
<li><a href="about.html">关于我们</a></li>
</ul>
</nav>
<div class="header-right">
<button class="btn btn-login">登录</button>
<button class="btn btn-register">免费注册</button>
</div>
</header>
<section class="banner">
<div class="banner-content">
<h1 class="banner-title">数字人平台</h1>
<h2 class="banner-subtitle">引领未来的智能交互体验</h2>
</div>
</section>
<main>
<section class="section" id="features">
<div class="container">
<h2 class="section-title">产品功能</h2>
<div class="features-carousel">
<!-- 轮播内容 -->
<div class="carousel-container">
<div class="carousel-track">
<!-- 形象生产 -->
<div class="carousel-slide">
<div class="feature-card">
<div class="feature-content">
<div class="feature-image">
<img src="assets/images/feature-1.jpg" alt="形象生产">
</div>
<div class="feature-info">
<h3>形象生产</h3>
<ul class="feature-list">
<li>多形象任意挑选，同时支持形象定制</li>
<li>部分形象可以选择展示姿态</li>
<li>部分形象提供多套服装造型选择</li>
<li>支持对声音进行音色和语速的调整</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 交互会话 -->
<div class="carousel-slide">
<div class="feature-card">
<div class="feature-content">
<div class="feature-image">
<img src="assets/images/feature-2.jpg" alt="交互会话">
</div>
<div class="feature-info">
<h3>交互会话</h3>
<ul class="feature-list">
<li>唇型语音同步，表情动作拟人</li>
<li>支持声音驱动与文本驱动</li>
<li>支持指定文本插入动作，灵活性高</li>
<li>落地场景丰富，落地场景多样</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 音视频播报 -->
<div class="carousel-slide">
<div class="feature-card">
<div class="feature-content">
<div class="feature-image">
<img src="assets/images/feature-3.jpg" alt="音视频播报">
</div>
<div class="feature-info">
<h3>音视频播报</h3>
<ul class="feature-list">
<li>唇型动作与声音实时同步</li>
<li>支持多种手势动作，灵活生动</li>
<li>小样本数字人制作成本低，时效快</li>
<li>应用场景广泛，提升企业沟通效率和服务温度</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 轮播控制按钮 -->
<div class="carousel-controls">
<button class="carousel-btn prev"><</button>
<div class="carousel-dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<button class="carousel-btn next">></button>
</div>
</div>
</div>
</section>
<section class="section" id="advantages">
<div class="container">
<h2 class="section-title">产品优势</h2>
<div class="advantages-grid">
<div class="advantage-tabs">
<div class="tab-item active" data-tab="tab1">
<a href="#advantage1">形象自然度业界领先</a>
</div>
<div class="tab-item" data-tab="tab2">
<a href="#advantage2">覆盖企业服务全周期</a>
</div>
<div class="tab-item" data-tab="tab3">
<a href="#advantage3">驱动技术业界领先</a>
</div>
<div class="tab-item" data-tab="tab4">
<a href="#advantage4">交互体验佳</a>
</div>
<div class="tab-item" data-tab="tab5">
<a href="#advantage5">场景应用拓展性强</a>
</div>
</div>
<div class="tab-content active" id="advantage1">
<div class="content-wrapper">
<div class="content-left">
<h3>形象资产</h3>
<p>形象资产：2D形象、3D形象</p>
<h3>我们的模式</h3>
<ul>
<li>效果逼真：脸型、发型、妆容、服装、声音、动作</li>
<li>定制高效：具有2D形象制作管线，支持摄影棚录制训练、3分钟视频训练、换脸定制；3D形象制作管线支持照片建模</li>
<li>IP授权：可提供IP形象授权</li>
</ul>
</div>
<div class="content-right">
<img src="assets/images/1.jpg" alt="形象展示">
</div>
</div>
</div>
<div class="tab-content" id="advantage2">
<div class="content-wrapper">
<div class="content-left">
<h3>企业服务</h3>
<p>全面覆盖企业数字人应用场景</p>
<h3>服务内容</h3>
<ul>
<li>数字人定制：专业定制，快速交付</li>
<li>内容制作：视频内容一站式制作</li>
<li>技术支持：全方位技术支持和培训</li>
<li>运营维护：持续的运营维护服务</li>
</ul>
</div>
<div class="content-right">
<img src="assets/images/1.jpg" alt="企业服务展示">
</div>
</div>
</div>
<div class="tab-content" id="advantage3">
<div class="content-wrapper">
<div class="content-left">
<h3>驱动技术</h3>
<p>业界领先的数字人驱动技术</p>
<h3>技术优势</h3>
<ul>
<li>语音驱动：支持声音驱动、文本驱动</li>
<li>动作驱动：支持动作捕捉、表情识别</li>
<li>实时渲染：毫秒级延迟，流畅自然</li>
<li>多端适配：支持多种终端设备接入</li>
</ul>
</div>
<div class="content-right">
<img src="assets/images/1.jpg" alt="驱动技术展示">
</div>
</div>
</div>
<div class="tab-content" id="advantage4">
<div class="content-wrapper">
<div class="content-left">
<h3>交互类型</h3>
<p>2种交互类型：播报、交互</p>
<h3>我们的能力</h3>
<ul>
<li>时延低：首帧延迟<600ms</li>
<li>服务器并发高、服务器性能优越、软硬件配置规格高</li>
<li>多模交互能力全：NLP、知识图谱、视觉等多种AI技术综合运用，加深感知理解</li>
</ul>
</div>
<div class="content-right">
<img src="assets/images/1.jpg" alt="交互体验展示">
</div>
</div>
</div>
<div class="tab-content" id="advantage5">
<div class="content-wrapper">
<div class="content-left">
<h3>一站式数字人平台</h3>
<p>一站式应用平台：支持数字人运营管理全流程服务</p>
<h3>我们的能力</h3>
<ul>
<li>接入方式：H5/小程序/Android/IOS</li>
<li>渲染引擎：Webgl/Unity/UE</li>
<li>通信协议：支持RTSP/WebRTC/TRTC等多种通信协议</li>
</ul>
</div>
<div class="content-right">
<img src="assets/images/1.jpg" alt="场景应用展示">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="scenarios">
<div class="container">
<h2 class="section-title">应用场景</h2>
<div class="scenarios-grid">
<div class="scenario-tabs">
<div class="scenario-tab active" data-scenario="scenario1">
<a href="#scenario1">内容创作</a>
</div>
<div class="scenario-tab" data-scenario="scenario2">
<a href="#scenario2">数字员工</a>
</div>
<div class="scenario-tab" data-scenario="scenario3">
<a href="#scenario3">视频客服</a>
</div>
<div class="scenario-tab" data-scenario="scenario4">
<a href="#scenario4">虚拟直播</a>
</div>
</div>
<div class="scenario-content active" id="scenario1">
<div class="scenario-wrapper">
<div class="scenario-left">
<img src="assets/images/2.jpg" alt="内容创作场景">
</div>
<div class="scenario-right">
<div class="scenario-header">
<h3>内容创作</h3>
<p class="scenario-desc">可应用于新闻播报、政策解读、课件讲解</p>
</div>
<div class="scenario-intro">
<p>将文本、语音等内容转化为以数字人形象为主的视频内容，使其能够满足在电视、网站、视频平台或社交平台等视频媒体的投放或传播需求，为内容创作者提供低成本、更强表现力的视频内容创作工具，提升创作效率，放大内容价值。</p>
</div>
<div class="scenario-cases">
<h4>典型适配场景</h4>
<div class="case-list">
<div class="case-item">
<span class="case-title">传媒行业</span>
<p>为响应国家广电总局规划，推动虚拟主持人应用于新闻播报、天气预报、综艺科教节目生产，创新节目形态，适应制播效率智能化水平。</p>
</div>
<div class="case-item">
<span class="case-title">教育行业</span>
<p>大量的名词解释、课件讲解、错题讲解让老师不堪重负，通过该产品可减轻老师的工作量，一键成片。</p>
</div>
<div class="case-item">
<span class="case-title">各行业中的新媒体运营</span>
<p>需要快速生产视频，投放到短视频平台，如党建政策解读、公司政策解读、金融行业分析等。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 其他场景内容 -->
<div class="scenario-content" id="scenario2">
<div class="scenario-wrapper">
<div class="scenario-left">
<img src="assets/images/2.jpg" alt="数字员工场景">
</div>
<div class="scenario-right">
<div class="scenario-header">
<h3>数字员工</h3>
<p class="scenario-desc">可应用于企业数字化转型</p>
</div>
<div class="scenario-intro">
<p>为企业提供智能数字员工解决方案，提升工作效率和服务质量。</p>
</div>
<div class="scenario-cases">
<h4>典型适配场景</h4>
<div class="case-list">
<div class="case-item">
<span class="case-title">企业服务</span>
<p>提供7*24小时不间断的客户服务，处理日常咨询和业务办理。</p>
</div>
<div class="case-item">
<span class="case-title">内部培训</span>
<p>为企业员工提供专业的培训和指导服务。</p>
</div>
<div class="case-item">
<span class="case-title">业务办理</span>
<p>协助处理日常业务流程，提高工作效率。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="scenario-content" id="scenario3">
<div class="scenario-wrapper">
<div class="scenario-left">
<img src="assets/images/2.jpg" alt="视频客服场景">
</div>
<div class="scenario-right">
<div class="scenario-header">
<h3>视频客服</h3>
<p class="scenario-desc">智能化视频客服解决方案</p>
</div>
<div class="scenario-intro">
<p>提供智能化的视频客服服务，实现更好的用户体验和服务效率。</p>
</div>
<div class="scenario-cases">
<h4>典型适配场景</h4>
<div class="case-list">
<div class="case-item">
<span class="case-title">在线咨询</span>
<p>提供实时的在线视频咨询服务，解答用户问题。</p>
</div>
<div class="case-item">
<span class="case-title">产品介绍</span>
<p>通过视频方式展示和介绍产品，提升用户理解度。</p>
</div>
<div class="case-item">
<span class="case-title">售后服务</span>
<p>提供专业的售后支持和问题解决服务。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="scenario-content" id="scenario4">
<div class="scenario-wrapper">
<div class="scenario-left">
<img src="assets/images/2.jpg" alt="虚拟直播场景">
</div>
<div class="scenario-right">
<div class="scenario-header">
<h3>虚拟直播</h3>
<p class="scenario-desc">数字人直播解决方案</p>
</div>
<div class="scenario-intro">
<p>为企业提供专业的虚拟主播直播服务，实现更好的直播效果和互动体验。</p>
</div>
<div class="scenario-cases">
<h4>典型适配场景</h4>
<div class="case-list">
<div class="case-item">
<span class="case-title">商品直播</span>
<p>通过虚拟主播进行商品展示和销售。</p>
</div>
<div class="case-item">
<span class="case-title">活动直播</span>
<p>为各类活动提供专业的直播服务。</p>
</div>
<div class="case-item">
<span class="case-title">品牌推广</span>
<p>通过直播形式进行品牌推广和营销。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<h2 class="footer-title">7X24小时多渠道服务支持</h2>
<p class="footer-desc">在您使用数字人产品期间遇到任何问题，专业的售后工程师团队为您提供7*24技术服务</p>
<div class="service-grid">
<div class="service-item">
<h3>售前服务</h3>
<p>售前咨询在线为您服务，欢迎咨询产品功能、解决方案等任何问题</p>
</div>
<div class="service-item">
<h3>售中服务</h3>
<p>专业技术团队提供一对一指导，助您轻松数字人采集、业务顺利开展</p>
</div>
<div class="service-item">
<h3>售后服务</h3>
<p>金牌服务团队7*24小时待命，提供为适合合适、满意百分百的售后支持</p>
</div>
</div>
<div class="footer-info">
<div class="info-section">
<h3>产品与服务</h3>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
<div class="info-section">
<h3>联系我们</h3>
<ul>
<li>电子邮箱：DZYX@163.COM</li>
<li>联系地址：中国XX省XX市XX区XX街道XX楼A座501室</li>
<li>商务咨询：18888886666</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>备案号：xxxx-1 Copyright © 2021-2024 All Rights Reserved. 中国XXXX互联网科技有限公司 版权所有</p>
</div>
</div>
</footer>
<script src="assets/index.js"></script>
</body>
</html>
数字人克隆
代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字人克隆 - AI数字人平台</title>
<link rel="stylesheet" href="assets/index.css">
<link rel="stylesheet" href="assets/clone.css">
</head>
<body>
<header class="header">
<div class="header-left">
<!-- <img src="assets/images/logo.png" alt="logo" class="logo"> -->
<span class="brand-text">数字人(静态网站模板)</span>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="clone.html" class="active">数字人克隆</a></li>
<li><a href="create.html">数字人视频创作</a></li>
<li><a href="help.html">帮助中心</a></li>
<li><a href="about.html">关于我们</a></li>
</ul>
</nav>
<div class="header-right">
<button class="btn btn-login">登录</button>
<button class="btn btn-register">免费注册</button>
</div>
</header>
<section class="clone-banner">
<div class="banner-content">
<div class="banner-text">
<h1>快速数字人克隆</h1>
<div class="banner-desc">
<p>为品牌打造超现实数字人</p>
<p>AI帮您打造真人</p>
<p>全栈AI技术</p>
</div>
</div>
<div class="banner-image">
<img src="assets/images/3.jpg" alt="数字人克隆展示">
</div>
</div>
</section>
<main>
<section class="clone-intro">
<div class="container">
<div class="intro-header">
<h2>数字人1:1真人还原，效果业界领先</h2>
<div class="price">6999元/每个形象/年</div>
</div>
<p class="intro-subtitle">国内先进AI研发团队 掌握数字人全栈技术</p>
<div class="intro-content">
<div class="features">
<div class="feature-item">
<span class="check-icon">✓</span>
<h3>门槛低</h3>
<p>几秒视频即可克隆自己他人</p>
</div>
<div class="feature-item">
<span class="check-icon">✓</span>
<h3>效果好</h3>
<p>形象逼真，动作自然，还原度评分99+</p>
</div>
<div class="feature-item">
<span class="check-icon">✓</span>
<h3>成本低</h3>
<p>千元级数字人定制，绝对的价格优势</p>
</div>
<div class="feature-item">
<span class="check-icon">✓</span>
<h3>交付快</h3>
<p>3-5个工作日完成训练</p>
</div>
</div>
<div class="process-showcase">
<div class="process-item">
<img src="assets/images/clone-1.jpg" alt="拍摄素材">
<p>拍摄几秒视频素材，提供一对一专业拍摄 辅导</p>
</div>
<div class="process-item">
<img src="assets/images/clone-2.jpg" alt="AI训练">
<p>数字人模型训练及部署上线</p>
</div>
<div class="process-item">
<img src="assets/images/clone-3.jpg" alt="生成视频">
<p>输入文本，选择数字人形象即可生成数字人视频</p>
</div>
</div>
</div>
</div>
</section>
<section class="industry-solutions">
<div class="container">
<h2 class="section-title">数字人赋能各行各业</h2>
<div class="solutions-grid">
<div class="solution-item">
<div class="solution-image">
<img src="assets/images/11.jpg" alt="金融行业">
</div>
<div class="solution-content">
<h3>金融行业</h3>
<p>数字人正在改变金融服务的面貌。例如，银行通过引入智能柜员机服务，使客户能够使用人脸识别技术进行身份验证，无需等待人工柜员处理业务。此外，数字人客服也逐渐普及，为客户提供24小时在线咨询服务，满足随时随地的服务需求。</p>
</div>
</div>
<div class="solution-item">
<div class="solution-image">
<img src="assets/images/11.jpg" alt="制造业">
</div>
<div class="solution-content">
<h3>制造业</h3>
<p>数字人技术也在制造业中发挥着重要作用。一些领先的企业利用物联网技术和人工智能技术，通过数字人进行生产过程的监控和管理，提高生产效率和质量。此外，数字人还可以用于产品设计和模拟，帮助企业在产品开发的段就进行优化和改进</p>
</div>
</div>
<div class="solution-item">
<div class="solution-image">
<img src="assets/images/11.jpg" alt="零售行业">
</div>
<div class="solution-content">
<h3>零售行业</h3>
<p>在零售领域，数字人技术被广泛应用于线上线下融合的购物体验中。例如，一些品牌通过引入数字导购员，为消费者提供个性化的购物建议和商品推荐，提升购物体验。</p>
</div>
</div>
<div class="solution-item">
<div class="solution-image">
<img src="assets/images/11.jpg" alt="教育行业">
</div>
<div class="solution-content">
<h3>教育行业</h3>
<p>数字人技术为教育带来了革命性的变革。例如，通过数字赋能，学校可以重构课程体系、整合教育资源、创新评价机制，打造新时期一体化人才培养创新实践的典范。数字人可以作为虚拟教师，为学生提供个性化的学习体验和辅导</p>
</div>
</div>
</div>
</div>
</section>
<section class="clone-process">
<div class="container">
<h2 class="section-title">克隆定制流程</h2>
<div class="process-steps">
<div class="process-step">
<div class="step-header">
<div class="step-icon">
<i class="video-icon"></i>
</div>
<h3>第一步：上传视频</h3>
</div>
<ul class="step-list">
<li>摄5min的真人录制视频</li>
<li>上传到数字人平台</li>
</ul>
</div>
<div class="process-step">
<div class="step-header">
<div class="step-icon">
<i class="ai-icon"></i>
</div>
<h3>第二步：AI分身训练</h3>
</div>
<ul class="step-list">
<li>制作周期3~5个工作日</li>
<li>AI深度建模，完美复刻真人形象</li>
</ul>
</div>
<div class="process-step">
<div class="step-header">
<div class="step-icon">
<i class="batch-icon"></i>
</div>
<h3>第三步：批量制作视频</h3>
</div>
<ul class="step-list">
<li>数字人上架到客户的后台</li>
<li>开始轻松批量制作视频</li>
</ul>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<h2 class="footer-title">7X24小时多渠道服务支持</h2>
<p class="footer-desc">在您使用数字人产品期间遇到任何问题，专业的售后工程师团队为您提供7*24技术服务</p>
<div class="service-grid">
<div class="service-item">
<h3>售前服务</h3>
<p>售前咨询在线为您服务，欢迎咨询产品功能、解决方案等任何问题</p>
</div>
<div class="service-item">
<h3>售中服务</h3>
<p>专业技术团队提供一对一指导，助您轻松数字人采集、业务顺利开展</p>
</div>
<div class="service-item">
<h3>售后服务</h3>
<p>金牌服务团队7*24小时待命，提供为适合合适、满意百分百的售后支持</p>
</div>
</div>
<div class="footer-info">
<div class="info-section">
<h3>产品与服务</h3>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
<div class="info-section">
<h3>联系我们</h3>
<ul>
<li>电子邮箱：DZYX@163.COM</li>
<li>联系地址：中国XX省XX市XX区XX街道XX楼A座501室</li>
<li>商务咨询：18888886666</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>备案号：xxxx-1 Copyright © 2021-2024 All Rights Reserved. 中国XXXX互联网科技有限公司 版权所有</p>
</div>
</div>
</footer>
<script src="assets/index.js"></script>
</body>
</html>
数字人视频制作
代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字人视频创作 - AI数字人平台</title>
<link rel="stylesheet" href="assets/index.css">
<link rel="stylesheet" href="assets/create.css">
</head>
<body>
<header class="header">
<div class="header-left">
<!-- <img src="assets/images/logo.png" alt="logo" class="logo"> -->
<span class="brand-text">数字人(静态网站模板)</span>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="clone.html">数字人克隆</a></li>
<li><a href="create.html" class="active">数字人视频创作</a></li>
<li><a href="help.html">帮助中心</a></li>
<li><a href="about.html">关于我们</a></li>
</ul>
</nav>
<div class="header-right">
<button class="btn btn-login">登录</button>
<button class="btn btn-register">免费注册</button>
</div>
</header>
<section class="create-banner">
<div class="banner-content">
<div class="banner-text">
<h1>数字人视频制作</h1>
<p class="banner-desc">探索未知，创新无限，数字人视频，引领时代新潮流</p>
</div>
<div class="banner-image">
<img src="assets/images/create-banner.jpg" alt="数字人视频制作">
</div>
</div>
</section>
<section class="create-compare">
<div class="container">
<h2 class="section-title">轻松4步制作数字人视频</h2>
<div class="compare-content">
<div class="compare-item traditional">
<h3>传统视频制作</h3>
<ul class="compare-list">
<li class="negative">
<span class="icon">✕</span>
<p>制作麻烦: 一个视频=演员+妆造团队+摄影组+拍摄场地</p>
</li>
<li class="negative">
<span class="icon">✕</span>
<p>周期长: 制作一个视频的平均时间要4天</p>
</li>
<li class="negative">
<span class="icon">✕</span>
<p>无法修改: 一次拍摄，只能用一次，无法修改台词</p>
</li>
<li class="negative">
<span class="icon">✕</span>
<p>模特声音单一: 一个模特的声音只能一种，无法切换</p>
</li>
</ul>
</div>
<div class="vs-icon">VS</div>
<div class="compare-item digital">
<h3>数字人视频制作</h3>
<ul class="compare-list">
<li class="positive">
<span class="icon">✓</span>
<p>傻瓜式操作: 一个视频=1段文案+1个数字人+一键合成</p>
</li>
<li class="positive">
<span class="icon">✓</span>
<p>速度快: 制作一个真人口播视频，仅需 5 分钟</p>
</li>
<li class="positive">
<span class="icon">✓</span>
<p>随时修改: 数字人视频，随时修改文本，随时生成</p>
</li>
<li class="positive">
<span class="icon">✓</span>
<p>数字人更智能: 一个数字人可说500种声音</p>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="create-steps">
<div class="container">
<h2 class="section-title">数字人颠覆传统视频制作</h2>
<div class="steps-content">
<div class="step-preview">
<img src="assets/images/create-steps.jpg" alt="制作步骤预览">
</div>
<div class="steps-list">
<div class="step-item">
<div class="step-number">01</div>
<div class="step-content">
<h3>点击创建项目</h3>
<p>选择现有模板或者点击"创建项目"开启你的内容创作。</p>
</div>
</div>
<div class="step-item">
<div class="step-number">02</div>
<div class="step-content">
<h3>选择数字人并输入文本</h3>
<p>选择合适的数字人形象并输入语音文本，可进行自定义调整。</p>
</div>
</div>
<div class="step-item">
<div class="step-number">03</div>
<div class="step-content">
<h3>编辑背景</h3>
<p>点击编辑背景进行背景文本及背景动画编辑，可自行创作背景内容</p>
</div>
</div>
<div class="step-item">
<div class="step-number">04</div>
<div class="step-content">
<h3>导出视频</h3>
<p>只需点击"导出视频"按钮，即可几分钟生成数字人讲解视频。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="create-scenarios">
<div class="container">
<h2 class="section-title">数字人8大应用场景，省钱省时间</h2>
<div class="scenarios-grid">
<div class="scenario-item">
<div class="scenario-icon">
<img src="assets/images/icons/movie.svg" alt="影视制作">
</div>
<h3>影视制作</h3>
</div>
<div class="scenario-item">
<div class="scenario-icon">
<img src="assets/images/icons/tv.svg" alt="娱乐节目与综艺">
</div>
<h3>娱乐节目与综艺</h3>
</div>
<div class="scenario-item">
<div class="scenario-icon">
<img src="assets/images/icons/ad.svg" alt="广告宣传与推广">
</div>
<h3>广告宣传与推广</h3>
</div>
<div class="scenario-item">
<div class="scenario-icon">
<img src="assets/images/icons/education.svg" alt="教育与培训">
</div>
<h3>教育与培训</h3>
</div>
<div class="scenario-item">
<div class="scenario-icon">
<img src="assets/images/icons/live.svg" alt="虚拟直播与互动">
</div>
<h3>虚拟直播与互动</h3>
</div>
<div class="scenario-item">
<div class="scenario-icon">
<img src="assets/images/icons/game.svg" alt="游戏开发与设计">
</div>
<h3>游戏开发与设计</h3>
</div>
<div class="scenario-item">
<div class="scenario-icon">
<img src="assets/images/icons/brand.svg" alt="虚拟代言与品牌形象">
</div>
<h3>虚拟代言与品牌形象</h3>
</div>
<div class="scenario-item">
<div class="scenario-icon">
<img src="assets/images/icons/culture.svg" alt="文化遗产保护与传承">
</div>
<h3>文化遗产保护与传承</h3>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<h2 class="footer-title">7X24小时多渠道服务支持</h2>
<p class="footer-desc">在您使用数字人产品期间遇到任何问题，专业的售后工程师团队为您提供7*24技术服务</p>
<div class="service-grid">
<div class="service-item">
<h3>售前服务</h3>
<p>售前咨询在线为您服务，欢迎咨询产品功能、解决方案等任何问题</p>
</div>
<div class="service-item">
<h3>售中服务</h3>
<p>专业技术团队提供一对一指导，助您轻松数字人采集、业务顺利开展</p>
</div>
<div class="service-item">
<h3>售后服务</h3>
<p>金牌服务团队7*24小时待命，提供为适合合适、满意百分百的售后支持</p>
</div>
</div>
<div class="footer-info">
<div class="info-section">
<h3>产品与服务</h3>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
<div class="info-section">
<h3>联系我们</h3>
<ul>
<li>电子邮箱：DZYX@163.COM</li>
<li>联系地址：中国XX省XX市XX区XX街道XX楼A座501室</li>
<li>商务咨询：18888886666</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>备案号：xxxx-1 Copyright © 2021-2024 All Rights Reserved. 中国XXXX互联网科技有限公司 版权所有</p>
</div>
</div>
</footer>
<script src="assets/index.js"></script>
</body>
</html>
帮助中心
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>帮助中心 - AI数字人平台</title>
<link rel="stylesheet" href="assets/index.css">
<link rel="stylesheet" href="assets/help.css">
</head>
<body>
<header class="header">
<div class="header-left">
<!-- <img src="assets/images/logo.png" alt="logo" class="logo"> -->
<span class="brand-text">数字人(静态网站模板)</span>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="clone.html">数字人克隆</a></li>
<li><a href="create.html">数字人视频创作</a></li>
<li><a href="help.html" class="active">帮助中心</a></li>
<li><a href="about.html">关于我们</a></li>
</ul>
</nav>
<div class="header-right">
<button class="btn btn-login">登录</button>
<button class="btn btn-register">免费注册</button>
</div>
</header>
<section class="help-search">
<div class="container">
<h1 class="help-title">帮助中心</h1>
<div class="search-box">
<input type="text" placeholder="查询您所需要的帮助内容" class="search-input">
<button class="search-btn">
<img src="assets/images/icons/search.svg" alt="搜索" class="search-icon">
</button>
</div>
</div>
</section>
<section class="help-menu">
<div class="container">
<div class="menu-grid">
<div class="menu-column">
<h2 class="menu-title">产品简介</h2>
<ul class="menu-list">
<li><a href="#">产品概述</a></li>
<li><a href="#">产品优势</a></li>
<li><a href="#">应用场景</a></li>
</ul>
</div>
<div class="menu-column">
<h2 class="menu-title">数字人形象介绍</h2>
<ul class="menu-list">
<li><a href="#">形象类别介绍</a></li>
<li><a href="#">基础形象库</a></li>
</ul>
</div>
<div class="menu-column">
<h2 class="menu-title">数字人平台操作指南</h2>
<ul class="menu-list">
<li><a href="#">访问平台</a></li>
<li><a href="#">形象生产与资产管理</a></li>
<li><a href="#">数字人视频生成与管理</a></li>
</ul>
</div>
<div class="menu-column">
<h2 class="menu-title">API接入</h2>
<ul class="menu-list">
<li><a href="#">声音定制API文档</a></li>
<li><a href="#">视频生成服务API文档</a></li>
<li><a href="#">资产管理API文档</a></li>
</ul>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<h2 class="footer-title">7X24小时多渠道服务支持</h2>
<p class="footer-desc">在您使用数字人产品期间遇到任何问题，专业的售后工程师团队为您提供7*24技术服务</p>
<div class="service-grid">
<div class="service-item">
<h3>售前服务</h3>
<p>售前咨询在线为您服务，欢迎咨询产品功能、解决方案等任何问题</p>
</div>
<div class="service-item">
<h3>售中服务</h3>
<p>专业技术团队提供一对一指导，助您轻松数字人采集、业务顺利开展</p>
</div>
<div class="service-item">
<h3>售后服务</h3>
<p>金牌服务团队7*24小时待命，提供为适合合适、满意百分百的售后支持</p>
</div>
</div>
<div class="footer-info">
<div class="info-section">
<h3>产品与服务</h3>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
<div class="info-section">
<h3>联系我们</h3>
<ul>
<li>电子邮箱：DZYX@163.COM</li>
<li>联系地址：中国XX省XX市XX区XX街道XX楼A座501室</li>
<li>商务咨询：18888886666</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>备案号：xxxx-1 Copyright © 2021-2024 All Rights Reserved. 中国XXXX互联网科技有限公司 版权所有</p>
</div>
</div>
</footer>
<script src="assets/index.js"></script>
</body>
</html>
关于我们
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关于我们 - AI数字人平台</title>
<link rel="stylesheet" href="assets/index.css">
<link rel="stylesheet" href="assets/about.css">
</head>
<body>
<header class="header">
<div class="header-left">
<!-- <img src="assets/images/logo.png" alt="logo" class="logo"> -->
<span class="brand-text">数字人(静态网站模板)</span>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="clone.html">数字人克隆</a></li>
<li><a href="create.html">数字人视频创作</a></li>
<li><a href="help.html">帮助中心</a></li>
<li><a href="about.html" class="active">关于我们</a></li>
</ul>
</nav>
<div class="header-right">
<button class="btn btn-login">登录</button>
<button class="btn btn-register">免费注册</button>
</div>
</header>
<section class="about-banner">
<div class="banner-content">
<h1>数字人平台搭建者</h1>
<div class="banner-desc">
<p>中国XXXX互联网科技有限公司深耕计算机图形和人工智能核心技术的融合与创新</p>
<p>致力于为人类创造更真实的数字世界</p>
</div>
</div>
</section>
<section class="contact-section">
<div class="container">
<h2 class="section-title">联系我们</h2>
<div class="contact-grid">
<div class="contact-card">
<div class="contact-icon">
<img src="assets/images/icons/customer-service.svg" alt="客服热线">
</div>
<h3>客服热线</h3>
<p class="contact-number">0000-6666666</p>
<p class="contact-time">工作日（08:30-17:30）</p>
</div>
<div class="contact-card">
<div class="contact-icon">
<img src="assets/images/icons/business.svg" alt="商务合作">
</div>
<h3>商务合作</h3>
<p class="contact-number">666-8888-999</p>
</div>
<div class="contact-card">
<div class="contact-icon">
<img src="assets/images/icons/email.svg" alt="客服邮箱">
</div>
<h3>客服邮箱</h3>
<p class="contact-email">88888888@szr.com</p>
</div>
</div>
</div>
</section>
<section class="about-intro">
<div class="container">
<div class="intro-content">
<h2 class="intro-title">
<span class="highlight">我们</span>
<span>是谁</span>
</h2>
<div class="intro-text">
<p>数字人平台，作为业界领先的智能交互解决方案提供商，致力于通过先进的数字人技术，为企业和个人用户带来前所未有的智能体验。我们专注于数字人的研发、设计、应用和推广，为各行各业提供高效、便捷、个性化的智能交互服务。</p>
<p>我们的数字人平台采用最先进的人工智能和机器学习技术，通过深度学习和大数据分析，实现与用户之间的自然、流畅的交流。我们的数字人具备高度智能化的语音识别、自然语言处理、情感分析等功能，能够准确理解用户需求，提供个性化的服务和解决方案。</p>
<p>数字人平台广泛应用于客户服务、教育培训、娱乐互动等多个领域。在客户服务领域，我们的数字人能够为用户提供24小时不间断的服务支持，解答疑问、处理问题，提高客户满意度。在教育培训领域，数字人可以作为智能导师，为学生提供个性化的学习指导和答疑解惑。在娱乐互动领域，数字人可以与用户进行有趣的对话和互动，带来全新的娱乐体验。</p>
<p>我们的数字人平台拥有强大的技术团队和专业的设计团队，能够为客户量身定制符合其需求的数字人解决方案。我们始终坚持以客户为中心，以技术创新为驱动，不断提升数字人的智能化水平和用户体验。</p>
</div>
</div>
</div>
</section>
<section class="global-coverage">
<div class="container">
<h2 class="section-title">业务覆盖全球200+个国家和地区</h2>
<div class="map-container">
<img src="assets/images/world-map.png" alt="全球业务覆盖地图" class="world-map">
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<h2 class="footer-title">7X24小时多渠道服务支持</h2>
<p class="footer-desc">在您使用数字人产品期间遇到任何问题，专业的售后工程师团队为您提供7*24技术服务</p>
<div class="service-grid">
<div class="service-item">
<h3>售前服务</h3>
<p>售前咨询在线为您服务，欢迎咨询产品功能、解决方案等任何问题</p>
</div>
<div class="service-item">
<h3>售中服务</h3>
<p>专业技术团队提供一对一指导，助您轻松数字人采集、业务顺利开展</p>
</div>
<div class="service-item">
<h3>售后服务</h3>
<p>金牌服务团队7*24小时待命，提供为适合合适、满意百分百的售后支持</p>
</div>
</div>
<div class="footer-info">
<div class="info-section">
<h3>产品与服务</h3>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
<div class="info-section">
<h3>联系我们</h3>
<ul>
<li>电子邮箱：DZYX@163.COM</li>
<li>联系地址：中国XX省XX市XX区XX街道XX楼A座501室</li>
<li>商务咨询：18888886666</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>备案号：xxxx-1 Copyright © 2021-2024 All Rights Reserved. 中国XXXX互联网科技有限公司 版权所有</p>
</div>
</div>
</footer>
<script src="assets/index.js"></script>
</body>
</html>
实际代码量还是比较多的，希望能对你有所帮助。项目所有的代码已经打包好了，如果需要可以去看看。
https://wwwoop.com/home/Index/projectInfo?goodsId=53&typeParam=2&subKey=1