星驰 E7 纯电智能轿跑 HTML 单页源码（深色科技蓝 + 青色霓虹，含性能参数 + 智驾 + 配置定价）

本源码是一款为新能源汽车品牌、车型发布、4S 店线上展厅打造的「性能展示 + 配置对比 + 试驾转化」单页模板，采用深色科技蓝 + 青色霓虹主调，视觉上冷峻、未来感十足，与电动化、智能化产品的科技属性高度契合。首屏用「零百 3.4 秒，续航 780 公里」这一组强对比数据瞬间抓住眼球，配合右侧概念车型展示区，让访客在 3 秒内建立性能认知。

页面按购车决策路径组织内容：顶部四项核心参数条带化呈现，强化数据记忆点；「动力」区块详解 800V 碳化硅平台、108kWh 麒麟电池与双腔空气悬架；「智能」区块覆盖城区领航、代客泊车与 15.6 英寸 3K 车机；「配置」区块用三列卡片清晰对比后驱标准版、四驱长续航版与性能旗舰版的价格与核心差异；最后的试驾 CTA 用电话表单降低留资门槛。

适合新能源汽车厂商、品牌官网、经销商活动页或车型发布专题使用。替换车型名、参数、价格与联系方式后即可上线，也可作为汽车类营销页、科技产品发布会落地页或学生作品集的项目案例。

使用教程

1. 下载与保存

将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。

3. 自定义修改

替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。

4. 上线部署

将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。

HTML 源码

复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>星驰 E7 · 纯电智能轿跑</title>
<style>
:root{
  --bg:#0a0d12;--bg2:#11161e;--card:#161c26;--line:#242c38;
  --cyan:#00e5ff;--cyan-d:#00a7bd;--txt:#eaf0f7;--muted:#8494a8;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif;background:var(--bg);color:var(--txt);line-height:1.7;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
a{text-decoration:none;color:inherit}

.nav{position:sticky;top:0;z-index:60;background:rgba(10,13,18,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{font-size:19px;font-weight:800;letter-spacing:5px}
.brand i{font-style:normal;color:var(--cyan)}
.menu{display:flex;gap:32px;font-size:14px;color:var(--muted);letter-spacing:.5px}
.menu a:hover{color:var(--cyan)}
.btn{display:inline-block;padding:11px 26px;font-size:14px;font-weight:600;border-radius:4px;transition:.25s;letter-spacing:1px}
.btn-c{background:var(--cyan);color:#031418}
.btn-c:hover{background:#5cf0ff;box-shadow:0 0 24px rgba(0,229,255,.4)}
.btn-o{border:1px solid var(--line);color:var(--txt)}
.btn-o:hover{border-color:var(--cyan);color:var(--cyan)}

/* hero */
.hero{position:relative;padding:96px 0 110px;overflow:hidden;text-align:center;
  background:radial-gradient(ellipse at 50% 130%,rgba(0,229,255,.16),transparent 62%)}
.hero:after{content:"";position:absolute;left:50%;bottom:-260px;transform:translateX(-50%);width:820px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(0,229,255,.2),transparent 70%);filter:blur(50px)}
.kicker{display:inline-block;border:1px solid var(--cyan-d);color:var(--cyan);font-size:12px;letter-spacing:3px;padding:6px 18px;border-radius:999px}
.hero h1{font-size:76px;font-weight:900;letter-spacing:-2px;margin:22px 0 8px;line-height:1.05;
  background:linear-gradient(180deg,#fff 30%,#7f93a8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:19px;color:var(--muted);max-width:520px;margin:0 auto 34px}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
.car{margin:58px auto 0;max-width:760px;height:230px;border-radius:14px;position:relative;z-index:2;
  background:linear-gradient(160deg,#1a222e,#0d1219);border:1px solid var(--line);display:grid;place-items:center;
  box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.car span{font-size:120px;filter:drop-shadow(0 0 40px rgba(0,229,255,.5))}

/* spec bar */
.specbar{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden;margin-top:-46px;position:relative;z-index:5}
.spec{padding:30px 22px;text-align:center;border-right:1px solid var(--line)}
.spec:last-child{border-right:none}
.spec b{display:block;font-size:38px;font-weight:800;color:var(--cyan);letter-spacing:-1px;line-height:1.1}
.spec b em{font-style:normal;font-size:15px;color:var(--muted);margin-left:3px;font-weight:500}
.spec p{font-size:13px;color:var(--muted);margin-top:6px;letter-spacing:1px}

.sec{padding:88px 0}
.sec-h{margin-bottom:48px}
.sec-h .kicker{margin-bottom:16px}
.sec-h h2{font-size:40px;font-weight:800;letter-spacing:-1px}
.sec-h p{color:var(--muted);margin-top:12px;max-width:560px}

/* features */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:32px 28px;transition:.3s;position:relative;overflow:hidden}
.feat:before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);opacity:0;transition:.3s}
.feat:hover{border-color:var(--cyan-d);transform:translateY(-6px)}
.feat:hover:before{opacity:1}
.feat .ico{width:46px;height:46px;border-radius:10px;background:rgba(0,229,255,.1);display:grid;place-items:center;font-size:22px;margin-bottom:18px}
.feat h3{font-size:18px;font-weight:700;margin-bottom:10px}
.feat p{font-size:14.5px;color:var(--muted)}

/* trims */
.trims{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.trim{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:34px 30px;transition:.3s}
.trim.hot{border-color:var(--cyan);background:linear-gradient(180deg,rgba(0,229,255,.07),var(--card));position:relative}
.trim.hot:after{content:"推荐";position:absolute;top:16px;right:16px;background:var(--cyan);color:#031418;font-size:11px;font-weight:800;padding:3px 10px;border-radius:3px;letter-spacing:1px}
.trim:hover{transform:translateY(-6px)}
.trim h3{font-size:20px;font-weight:800;letter-spacing:1px}
.trim .p{font-size:36px;font-weight:900;margin:14px 0 4px;letter-spacing:-1px}
.trim .p em{font-style:normal;font-size:14px;color:var(--muted);font-weight:500}
.trim .note{font-size:13px;color:var(--muted);padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:20px}
.trim ul{list-style:none}
.trim li{font-size:14px;color:var(--muted);padding:7px 0 7px 24px;position:relative}
.trim li:before{content:"—";position:absolute;left:0;color:var(--cyan)}
.trim .btn{width:100%;text-align:center;margin-top:22px}

/* gallery */
.gal{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:170px 170px;gap:16px}
.gi{border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;font-size:46px;transition:.3s}
.gi:hover{border-color:var(--cyan-d);transform:scale(1.02)}
.gi:nth-child(1){grid-row:span 2;font-size:76px;background:linear-gradient(150deg,#16202c,#0c1119)}
.gi:nth-child(2){background:linear-gradient(150deg,#141d28,#0b1016)}
.gi:nth-child(3){background:linear-gradient(150deg,#101822,#0a0e14)}
.gi:nth-child(4){background:linear-gradient(150deg,#131c26,#0b1015)}
.gi:nth-child(5){background:linear-gradient(150deg,#152029,#0c1218)}

/* cta */
.cta{border:1px solid var(--line);border-radius:16px;padding:64px 48px;text-align:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(0,229,255,.12),var(--bg2))}
.cta h2{font-size:38px;font-weight:800;letter-spacing:-1px;margin-bottom:12px}
.cta p{color:var(--muted);margin-bottom:30px}
.form{display:flex;gap:10px;max-width:460px;margin:0 auto;flex-wrap:wrap}
.form input{flex:1;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:13px 16px;color:var(--txt);font-size:14px;outline:none;font-family:inherit}
.form input:focus{border-color:var(--cyan)}

footer{border-top:1px solid var(--line);padding:46px 0 32px;margin-top:80px}
.f{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.f h4{font-size:13px;letter-spacing:2px;color:var(--txt);margin-bottom:14px}
.f a,.f p{display:block;font-size:13.5px;color:var(--muted);margin-bottom:8px}
.f a:hover{color:var(--cyan)}
.copy{text-align:center;font-size:12.5px;color:#5d6b7d;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}

@media(max-width:960px){
  .menu{display:none}
  .hero h1{font-size:48px}
  .specbar{grid-template-columns:repeat(2,1fr)}
  .spec:nth-child(2n){border-right:none}
  .spec:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .feats,.trims{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .gi:nth-child(1){grid-row:span 1;height:200px}
  .gi{height:140px}
  .f{grid-template-columns:1fr 1fr}
  .sec-h h2{font-size:30px}
}
</style>
</head>
<body>

<nav class="nav"><div class="wrap nav-in">
  <div class="brand">星驰<i>·</i>E7</div>
  <div class="menu"><a href="#power">动力</a><a href="#tech">智能</a><a href="#trim">配置</a><a href="#gal">外观</a></div>
  <a href="#order" class="btn btn-c">预约试驾</a>
</div></nav>

<header class="hero"><div class="wrap">
  <span class="kicker">2026 全新纯电轿跑</span>
  <h1>零百 3.4 秒<br>续航 780 公里</h1>
  <p class="sub">800V 高压碳化硅平台 + 双电机四驱，让加速与长途不再是二选一。</p>
  <div class="hero-btns">
    <a href="#order" class="btn btn-c">预约试驾</a>
    <a href="#trim" class="btn btn-o">查看配置与报价</a>
  </div>
  <div class="car"><span>🚗</span></div>
</div></header>

<div class="wrap"><div class="specbar">
  <div class="spec"><b>3.4<em>s</em></b><p>0-100 KM/H</p></div>
  <div class="spec"><b>780<em>km</em></b><p>CLTC 综合续航</p></div>
  <div class="spec"><b>12<em>min</em></b><p>补能 400 公里</p></div>
  <div class="spec"><b>0.198<em>Cd</em></b><p>整车风阻系数</p></div>
</div></div>

<section class="sec" id="power"><div class="wrap">
  <div class="sec-h">
    <span class="kicker">PERFORMANCE</span>
    <h2>快，但也要稳</h2>
    <p>前异步 + 后永磁双电机组合，综合功率 480kW。空气悬架每秒扫描路面 1000 次，激烈驾驶与长途舒适可以同时成立。</p>
  </div>
  <div class="feats">
    <div class="feat"><div class="ico">⚡</div><h3>800V 碳化硅平台</h3><p>峰值充电功率 480kW，实测 10%→80% 仅需 14 分钟，服务区一杯咖啡的时间。</p></div>
    <div class="feat"><div class="ico">🔋</div><h3>108kWh 麒麟电池</h3><p>CTP 无模组结构，能量密度 255Wh/kg，-20℃ 低温续航保持率仍达 78%。</p></div>
    <div class="feat"><div class="ico">🌀</div><h3>双腔空气悬架</h3><p>车身高度可调范围 80mm，运动模式下重心自动降低 25mm，过弯侧倾减少 40%。</p></div>
  </div>
</div></section>

<section class="sec" id="tech"><div class="wrap">
  <div class="sec-h">
    <span class="kicker">INTELLIGENCE</span>
    <h2>它比你更早看见路况</h2>
    <p>508 TOPS 算力，纯视觉 + 激光雷达双冗余，城区领航辅助已开通全国 214 城。</p>
  </div>
  <div class="feats">
    <div class="feat"><div class="ico">🛰️</div><h3>城区领航辅助</h3><p>无图方案，红绿灯识别、无保护左转、环岛通行全场景覆盖，接管率低至 0.7 次/百公里。</p></div>
    <div class="feat"><div class="ico">🅿️</div><h3>代客泊车</h3><p>支持跨层记忆泊车，最长记忆路线 1.2 公里，商场地库自己找车位。</p></div>
    <div class="feat"><div class="ico">🖥️</div><h3>15.6" 3K 中控</h3><p>自研车机系统，冷启动 1.9 秒，手机应用无缝流转，支持四音区语音免唤醒。</p></div>
  </div>
</div></section>

<section class="sec" id="trim"><div class="wrap">
  <div class="sec-h">
    <span class="kicker">LINEUP</span>
    <h2>三款配置，一个内核</h2>
    <p>无论哪一款，智能驾驶硬件与安全配置全系标配，不做减配区分。</p>
  </div>
  <div class="trims">
    <div class="trim">
      <h3>后驱标准版</h3>
      <div class="p">24.98<em> 万起</em></div>
      <div class="note">单电机后驱 · CLTC 620km</div>
      <ul><li>250kW 后置永磁电机</li><li>84kWh 磷酸铁锂电池</li><li>15.6" 3K 中控大屏</li><li>高速领航辅助</li><li>19 英寸低风阻轮毂</li></ul>
      <a href="#order" class="btn btn-o">选择此配置</a>
    </div>
    <div class="trim hot">
      <h3>四驱长续航版</h3>
      <div class="p">29.98<em> 万起</em></div>
      <div class="note">双电机四驱 · CLTC 780km</div>
      <ul><li>480kW 双电机四驱</li><li>108kWh 麒麟三元电池</li><li>双腔空气悬架 + CDC</li><li>城区 + 高速全域领航</li><li>21 扬声器杜比全景声</li></ul>
      <a href="#order" class="btn btn-c">选择此配置</a>
    </div>
    <div class="trim">
      <h3>性能旗舰版</h3>
      <div class="p">34.98<em> 万起</em></div>
      <div class="note">高性能四驱 · CLTC 730km</div>
      <ul><li>580kW 高功率四驱</li><li>前六后四活塞刹车卡钳</li><li>碳纤维尾翼与前唇套件</li><li>Nappa 真皮运动座椅</li><li>赛道模式与漂移模式</li></ul>
      <a href="#order" class="btn btn-o">选择此配置</a>
    </div>
  </div>
</div></section>

<section class="sec" id="gal"><div class="wrap">
  <div class="sec-h">
    <span class="kicker">DESIGN</span>
    <h2>为风而生的线条</h2>
  </div>
  <div class="gal">
    <div class="gi">🏎️</div><div class="gi">🪞</div><div class="gi">💺</div><div class="gi">🛞</div><div class="gi">🔦</div>
  </div>
</div></section>

<section class="sec" id="order"><div class="wrap"><div class="cta">
  <h2>预约一次试驾</h2>
  <p>留下手机号，专属顾问将在 24 小时内与你联系安排门店试驾。</p>
  <form class="form" onsubmit="event.preventDefault();this.querySelector('input').value='';alert('预约已提交（演示页面）');">
    <input type="tel" placeholder="请输入手机号码" required>
    <button type="submit" class="btn btn-c">立即预约</button>
  </form>
</div></div></section>

<footer><div class="wrap">
  <div class="f">
    <div><div class="brand" style="margin-bottom:14px">星驰<i>·</i>E7</div><p>重新定义电动轿跑的<br>性能与效率边界。</p></div>
    <div><h4>车型</h4><a href="#">星驰 E7</a><a href="#">星驰 S9</a><a href="#">星驰 X3</a></div>
    <div><h4>服务</h4><a href="#">充电网络</a><a href="#">整车质保</a><a href="#">软件升级</a></div>
    <div><h4>联系</h4><p>400-666-8899</p><p>service@xingchi-ev.cn</p></div>
  </div>
  <div class="copy">© 2026 星驰汽车 · 本页为 HTML 单页模板演示，品牌与参数均为虚构</div>
</div></footer>

</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1915.html