极简线框型横向时间轴：企业官网招商板块必备
招商流程展示是品牌、工厂及连锁项目官网的核心模块。本文分享一款极简线框风格的横向时间轴代码，适用于网站首页招商区。该方案在桌面端呈现全流程横向布局，移动端自动适配为竖向时间轴，兼顾美观与实用性。
视觉效果展示
PC 端效果：
移动端效果：
设计亮点
- 极简美学：采用纯细线与线框卡片设计，摒弃厚重阴影，风格高级克制。
- 交互细腻：Hover 状态仅线条与边框变色，动效简洁不浮夸。
- 响应式自适应：手机端自动切换纵向排版，确保文字清晰可读，无挤压变形。
- 部署便捷：代码结构清晰，可直接嵌入模板，仅需修改主色与文案即可上线。
完整代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:"PingFang SC","Microsoft YaHei",sans-serif;}
.invest-timeline-lineframe{
width:100%;
padding:80px 24px;
background:#fff;
}
.timeline-wrap{
max-width:1240px;
margin:0 auto;
}
.timeline-title{
text-align:center;
margin-bottom:70px;
}
.timeline-title h2{
font-size:42px;
color:#111827;
font-weight:500;
margin-bottom:8px;
}
.timeline-title p{
font-size:16px;
color:#6b7280;
letter-spacing:2px;
}
.timeline-rail{
position:relative;
padding:32px 0;
}
.timeline-rail::before{
content:"";
position:absolute;
top:48px;
left:0;
width:100%;
height:1px;
background:#9ca3af;
}
.timeline-list{
display:flex;
position:relative;
z-index:2;
}
.timeline-item{
flex:1;
text-align:center;
padding:0 8px;
cursor:pointer;
transition:0.3s ease;
}
.item-num{
width:42px;
height:42px;
border-radius:50%;
border:1px solid #9ca3af;
background:#fff;
margin:0 auto 16px;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
color:#6b7280;
transition:0.3s;
}
.timeline-item:hover .item-num{
border-color:#2563eb;
color:#2563eb;
}
.item-card{
border:1px solid #d1d5db;
border-radius:8px;
padding:14px 8px;
transition:0.3s;
}
.timeline-item:hover .item-card{
border-color:#2563eb;
}
.item-card h4{
font-size:17px;
color:#1f2937;
font-weight:500;
margin-bottom:4px;
line-height:1.4;
}
.item-card p{
font-size:13px;
color:#6b7280;
}
@media (max-width:992px){
.timeline-list{
flex-direction:column;
gap:32px;
}
.timeline-rail::before{
width:1px;
height:100%;
left:21px;
top:0;
}
.timeline-item{
text-align:left;
padding-left:64px;
position:relative;
}
.item-num{
position:absolute;
left:0;
top:0;
margin:0;
}
}
</style>
</head>
<body>
<section class="invest-timeline-lineframe">
<div class="timeline-wrap">
<div class="timeline-title">
<h2>招商流程</h2>
<p>INVESTMENT PROCESS</p>
</div>
<div class="timeline-rail">
<div class="timeline-list">
<div class="timeline-item">
<div class="item-num">01</div>
<div class="item-card">
<h4>招商咨询</h4>
<p>项目初步沟通</p>
</div>
</div>
<div class="timeline-item">
<div class="item-num">02</div>
<div class="item-card">
<h4>提交申请</h4>
<p>提交合作资料</p>
</div>
</div>
<div class="timeline-item">
<div class="item-num">03</div>
<div class="item-card">
<h4>资质审核<br>实地考察</h4>
<p>合作资质评估</p>
</div>
</div>
<div class="timeline-item">
<div class="item-num">04</div>
<div class="item-card">
<h4>访厂考察、洽谈</h4>
<p>合作细节确认</p>
</div>
</div>
<div class="timeline-item">
<div class="item-num">05</div>
<div class="item-card">
<h4>签订经销合同</h4>
<p>达成正式合作</p>
</div>
</div>
<div class="timeline-item">
<div class="item-num">06</div>
<div class="item-card">
<h4>品项选择<br>渠道布局推进</h4>
<p>规划落地策略</p>
</div>
</div>
<div class="timeline-item">
<div class="item-num">07</div>
<div class="item-card">
<h4>人员配备</h4>
<p>团队搭建培训</p>
</div>
</div>
<div class="timeline-item">
<div class="item-num">08</div>
<div class="item-card">
<h4>市场推广</h4>
<p>项目运营启动</p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>自定义配置指南
修改品牌主色
代码中的#2563eb为 Hover 高亮色，请替换为您的企业品牌标准色。
调整文案内容
直接修改 HTML 中的h4标题与p描述文字，可根据实际业务流程按需增减步骤节点。
调整模块留白
通过 CSS 中的padding:80px 24px控制模块上下内边距，可根据页面整体布局灵活调大或缩小。
适用场景
- 企业官网首页招商合作板块
- 品牌加盟、经销代理专属页面
- 产业园、供应链及制造类官网流程展示
#前端开发 #HTML #企业官网 #时间轴 #招商页面