本源码是一款「旅游线路详情」单页模板，采用洱海蓝绿与沙色为主调，搭配橙色强调色，视觉上清爽、自然，非常贴合旅行度假场景。页面顶部是一张大气的渐变封面，标注天数、人数、交通方式与评分，首屏即给足旅行氛围与信任背书。
内容结构按旅游产品真实需求设计：线路亮点用四宫格卡片展示核心卖点；每日行程用左侧时间轴清晰呈现 Day 1 到 Day 4 的安排；费用说明区左右分栏列出包含与不含项目；右侧悬浮预订卡包含日期选择、人数、手机号与定金按钮，同时放置行程顾问联系方式，方便游客直接咨询。响应式下侧边栏会自然下移到正文底部，保证移动端阅读体验。
适合旅行社、自由行工作室、民宿房东、亲子游学等机构展示具体线路。替换封面、行程、价格与联系方式后，即可作为产品详情页投放到公众号、小红书或官网。
使用教程
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.0">
<title>洱海环线 4 日慢旅 · 行程详情</title>
<style>
:root{
--sea:#0e6f7e;
--sea-dark:#094e59;
--sun:#f2a33c;
--sand:#fdf7ee;
--paper:#ffffff;
--ink:#1d2d31;
--muted:#6d8189;
--line:#dfeaec;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;background:var(--sand);color:var(--ink);line-height:1.75}
a{text-decoration:none;color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
/* 顶图 */
.cover{position:relative;height:400px;background:linear-gradient(160deg,#0e6f7e,#14a0a8 45%,#7fd0c4);display:flex;align-items:flex-end;overflow:hidden}
.cover::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 22%,rgba(255,214,150,.55),transparent 46%)}
.cover::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:120px;background:linear-gradient(to top,rgba(253,247,238,1),transparent)}
.cover-inner{position:relative;z-index:2;padding-bottom:52px;color:#fff}
.crumb{font-size:13.5px;opacity:.9;margin-bottom:14px;letter-spacing:1px}
.cover h1{font-size:44px;line-height:1.2;text-shadow:0 4px 20px rgba(0,0,0,.22)}
.cover .sub{margin-top:12px;font-size:16px;opacity:.95}
.chips{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px);padding:6px 14px;border-radius:999px;font-size:13.5px}
/* 主体 */
.layout{display:grid;grid-template-columns:1fr 320px;gap:38px;padding:44px 0 70px;align-items:start}
.block{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:30px;margin-bottom:24px}
.block h2{font-size:23px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.block h2::before{content:"";width:5px;height:20px;border-radius:3px;background:var(--sun)}
.block .lead{color:var(--muted);margin-bottom:22px;font-size:15px}
/* 亮点 */
.high{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.hi{display:flex;gap:13px;background:var(--sand);border-radius:14px;padding:16px}
.hi i{font-style:normal;font-size:24px;line-height:1}
.hi b{display:block;font-size:15.5px}
.hi span{color:var(--muted);font-size:13.5px}
/* 行程时间轴 */
.days{position:relative;padding-left:34px}
.days::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--line)}
.day{position:relative;padding-bottom:26px}
.day:last-child{padding-bottom:0}
.day::before{content:"";position:absolute;left:-28px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--sea);border:3px solid var(--paper);box-shadow:0 0 0 2px var(--sea)}
.day .d{display:inline-block;background:var(--sea);color:#fff;font-size:12.5px;font-weight:700;padding:3px 11px;border-radius:6px;letter-spacing:1px;margin-bottom:8px}
.day h3{font-size:18px;margin-bottom:6px}
.day p{color:var(--muted);font-size:14.5px}
.day ul{margin-top:10px;padding-left:18px;color:var(--muted);font-size:14px}
.day li{margin-bottom:4px}
/* 包含 / 不含 */
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.list{list-style:none;font-size:14.5px;display:grid;gap:9px}
.list.ok li::before{content:"✓";color:#17a06e;font-weight:900;margin-right:8px}
.list.no li::before{content:"✕";color:#d1656a;font-weight:900;margin-right:8px}
.two h4{font-size:15px;margin-bottom:12px;letter-spacing:1px;color:var(--muted)}
/* 侧栏预订卡 */
.side{position:sticky;top:22px}
.book{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 14px 40px rgba(14,111,126,.1)}
.price{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.price b{font-size:38px;color:var(--sea)}
.price small{color:var(--muted);font-size:14px}
.origin{color:#b3c1c5;text-decoration:line-through;font-size:14px;margin-bottom:18px;display:block}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input,.field select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:14.5px;font-family:inherit;background:var(--sand);color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--sea);background:#fff}
.book button{width:100%;padding:14px;background:var(--sun);color:#4a2c00;border:none;border-radius:10px;font-size:16px;font-weight:800;cursor:pointer;transition:.2s;font-family:inherit}
.book button:hover{background:#ffb454;transform:translateY(-2px)}
.note{margin-top:14px;font-size:12.5px;color:var(--muted);text-align:center}
.contact{margin-top:18px;padding-top:18px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--muted)}
.contact b{color:var(--ink);display:block;font-size:15px;margin-bottom:4px}
footer{background:var(--sea-dark);color:#bfe0e4;text-align:center;padding:28px 20px;font-size:14px}
@media(max-width:900px){
.cover{height:330px}
.cover h1{font-size:30px}
.layout{grid-template-columns:1fr;gap:24px}
.high,.two{grid-template-columns:1fr}
.side{position:static}
}
</style>
</head>
<body>
<section class="cover">
<div class="wrap cover-inner">
<div class="crumb">首页 / 云南线路 / 洱海环线</div>
<h1>洱海环线 4 日慢旅</h1>
<div class="sub">不赶路、不进店，把时间留给一片湖和几家小店</div>
<div class="chips">
<span class="chip">📅 4 天 3 晚</span>
<span class="chip">👥 小团 6–12 人</span>
<span class="chip">🚐 全程包车</span>
<span class="chip">⭐ 4.9 / 1,206 条评价</span>
</div>
</div>
</section>
<div class="wrap layout">
<div>
<div class="block">
<h2>线路亮点</h2>
<p class="lead">我们把大理最容易被走马观花错过的部分，重新排了一遍顺序。</p>
<div class="high">
<div class="hi"><i>🌅</i><div><b>双廊日出</b><span>清晨 6 点出发，避开人潮的湖面</span></div></div>
<div class="hi"><i>🚲</i><div><b>环湖骑行段</b><span>挑最美的 18 公里，其余乘车</span></div></div>
<div class="hi"><i>🏡</i><div><b>白族村落</b><span>喜洲扎染工坊 + 本地人家午饭</span></div></div>
<div class="hi"><i>☕</i><div><b>湖景下午茶</b><span>才村码头独立咖啡馆，含一杯饮品</span></div></div>
</div>
</div>
<div class="block">
<h2>每日行程</h2>
<p class="lead">行程留了大量自由时间，喜欢哪儿就多待一会儿。</p>
<div class="days">
<div class="day">
<span class="d">DAY 1</span>
<h3>抵达大理 · 古城闲逛</h3>
<p>机场/高铁站接站，入住古城附近客栈，晚上自由逛人民路。</p>
<ul><li>下午 15:00 前抵达即可</li><li>晚餐自理（推荐清单已随行程发送）</li></ul>
</div>
<div class="day">
<span class="d">DAY 2</span>
<h3>喜洲 · 扎染与稻田</h3>
<p>上午前往喜洲古镇，体验白族扎染，午餐在本地人家中吃八大碗。</p>
<ul><li>扎染工坊体验（含材料，成品可带走）</li><li>下午稻田拍照 + 转角楼建筑漫步</li></ul>
</div>
<div class="day">
<span class="d">DAY 3</span>
<h3>双廊日出 · 环湖骑行</h3>
<p>清晨看日出，白天沿湖东岸骑行 18 公里，傍晚返回客栈。</p>
<ul><li>05:30 出发，含早餐打包</li><li>提供山地车与头盔，体力不足可随时上车</li></ul>
</div>
<div class="day">
<span class="d">DAY 4</span>
<h3>才村码头 · 返程</h3>
<p>上午湖边咖啡与自由摄影，午后统一送站，结束行程。</p>
<ul><li>建议返程航班安排在 16:00 之后</li></ul>
</div>
</div>
</div>
<div class="block">
<h2>费用说明</h2>
<div class="two">
<div>
<h4>费用包含</h4>
<ul class="list ok">
<li>3 晚精选客栈住宿（双人间）</li>
<li>全程空调商务车与司机</li>
<li>3 次正餐 + 1 次下午茶</li>
<li>扎染体验与骑行装备</li>
<li>旅行意外险</li>
</ul>
</div>
<div>
<h4>费用不含</h4>
<ul class="list no">
<li>往返大理的大交通</li>
<li>行程中标注自理的餐食</li>
<li>个人消费与纪念品</li>
<li>单房差（如需single补 480 元）</li>
</ul>
</div>
</div>
</div>
</div>
<aside class="side">
<div class="book">
<div class="price"><b>¥2,680</b><small>/ 人起</small></div>
<span class="origin">原价 ¥3,180</span>
<div class="field"><label>出发日期</label><input type="date" value="2026-09-18"></div>
<div class="field"><label>出行人数</label>
<select><option>1 人</option><option selected>2 人</option><option>3 人</option><option>4 人及以上</option></select>
</div>
<div class="field"><label>联系手机</label><input type="tel" placeholder="请输入手机号"></div>
<button>立即预订 · 定金 ¥500</button>
<div class="note">出发前 7 天可免费改期或全额退款</div>
<div class="contact"><b>行程顾问 · 阿柔</b>微信 dali-slow-trip<br>每天 09:00 – 22:00 在线</div>
</div>
</aside>
</div>
<footer>© 2026 慢旅工作室 · 云南大理 · 旅行社业务经营许可证 L-YN-000000</footer>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1866.html
微信扫一扫 
支付宝扫一扫 
