食光记美食食谱分享博客 HTML 单页源码

这是一款为美食博主、家庭食谱分享与个人饮食专栏设计的博客首页模板。整体以米杏色为底，搭配暖橘强调色与焦糖棕文字，营造出温馨、治愈、有烟火气的阅读氛围。首屏以一句「把每一天，煮成值得记住的味道」点题，下方是分类标签胶囊，方便访客快速筛选。

主体部分使用 CSS columns 实现了三栏瀑布流食谱卡片，适配不同高度的封面占位，hover 时卡片轻微上浮并加深阴影；每张卡片展示了分类、标题、简介与评分/耗时。页面底部设置了邮件订阅区块，用输入框 + 按钮收集读者邮箱，形成持续触达的入口。

非常适合美食创作者、私房菜博主或生活方式公众号用作食谱合集首页。将占位图替换为真实成品图、替换食谱文案与订阅链接后，即可上线一个具有食欲感的个人食谱站。

使用教程

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>食光记 · 美食食谱分享博客</title>
<style>
  :root{
    --cream:#f7efe2; --orange:#e8843c; --brown:#7a4f33; --ink:#2c2118; --muted:#8a7a68;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7}
  a{text-decoration:none;color:inherit}
  .wrap{max-width:1100px;margin:0 auto;padding:0 22px}
  header{display:flex;align-items:center;justify-content:space-between;height:66px;border-bottom:1px dashed #e2d4c0}
  .logo{font-weight:800;font-size:22px;color:var(--brown)}
  .logo span{color:var(--orange)}
  .menu{display:flex;gap:24px;font-size:15px;color:var(--muted)}
  .menu a:hover{color:var(--orange)}
  /* 首屏 */
  .hero{padding:60px 0 44px;text-align:center}
  .hero .badge{display:inline-block;font-size:13px;color:var(--orange);border:1px solid var(--orange);border-radius:999px;padding:5px 16px;margin-bottom:18px}
  .hero h1{font-size:42px;margin-bottom:14px}
  .hero p{color:var(--muted);font-size:17px;max-width:560px;margin:0 auto}
  .tags{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px}
  .tags a{font-size:13px;padding:7px 16px;background:#fff;border:1px solid #ecdfca;border-radius:999px;color:var(--brown)}
  .tags a:hover{background:var(--orange);color:#fff;border-color:var(--orange)}
  /* 卡片流 */
  .grid{columns:3;column-gap:22px;padding:40px 0 60px}
  .post{break-inside:avoid;background:#fff;border-radius:18px;overflow:hidden;margin-bottom:22px;box-shadow:0 10px 24px rgba(122,79,51,.08);transition:.22s}
  .post:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(122,79,51,.16)}
  .post .pic{height:170px}
  .p1{background:linear-gradient(135deg,#f6a96b,#e8843c)}
  .p2{background:linear-gradient(135deg,#9ccb6a,#5ba85f)}
  .p3{background:linear-gradient(135deg,#e8b3a0,#cf7a5c)}
  .p4{background:linear-gradient(135deg,#f2cf6b,#e0a23c)}
  .p5{background:linear-gradient(135deg,#b6a0e8,#8b6fd6)}
  .p6{background:linear-gradient(135deg,#7fc8c8,#3f9b9b)}
  .post .pad{padding:18px}
  .post .cat{font-size:12px;color:var(--orange);font-weight:700}
  .post h3{font-size:18px;margin:6px 0 8px}
  .post p{font-size:14px;color:var(--muted);margin-bottom:12px}
  .post .foot{display:flex;justify-content:space-between;font-size:13px;color:#b6a48d}
  /* 订阅 */
  .sub{background:#fff;border-radius:22px;padding:44px;text-align:center;margin-bottom:60px;border:1px solid #ecdfca}
  .sub h2{font-size:26px;margin-bottom:10px}
  .sub p{color:var(--muted);margin-bottom:20px}
  .sub form{display:flex;gap:10px;max-width:440px;margin:0 auto}
  .sub input{flex:1;padding:13px 16px;border-radius:10px;border:1px solid #e2d4c0;font-size:15px}
  .sub button{padding:13px 24px;border:none;border-radius:10px;background:var(--orange);color:#fff;font-weight:700;cursor:pointer}
  footer{padding:30px 0;text-align:center;color:var(--muted);font-size:14px;border-top:1px dashed #e2d4c0}
  @media(max-width:860px){.grid{columns:2}.hero h1{font-size:34px}.menu{display:none}}
  @media(max-width:520px){.grid{columns:1}.sub form{flex-direction:column}}
</style>
</head>
<body>
<div class="wrap">
  <header>
    <div class="logo">食<span>光</span>记</div>
    <nav class="menu"><a href="#">家常菜</a><a href="#">烘焙</a><a href="#">轻食</a><a href="#">汤羹</a><a href="#">关于</a></nav>
  </header>
</div>

<section class="wrap hero">
  <span class="badge">慢煮三餐 · 记录家的味道</span>
  <h1>把每一天，煮成值得记住的味道</h1>
  <p>这里收录了上百道经过反复试做的人气食谱，图文步骤清晰，新手也能一次成功。</p>
  <div class="tags">
    <a href="#"># 快手早餐</a><a href="#"># 新手友好</a><a href="#"># 低卡轻食</a><a href="#"># 周末烘焙</a><a href="#"># 一人食</a>
  </div>
</section>

<section class="wrap">
  <div class="grid">
    <article class="post"><div class="pic p1"></div><div class="pad"><div class="cat">家常菜</div><h3>蒜香黄油虾仁</h3><p>十分钟搞定的下饭神器，虾仁 Q 弹、酱汁浓郁，配米饭绝了。</p><div class="foot"><span>★ 4.9</span><span>12 分钟</span></div></div></article>
    <article class="post"><div class="pic p2"></div><div class="pad"><div class="cat">轻食</div><h3>牛油果藜麦碗</h3><p>高纤维低负担，饱腹感强，健身日也吃得没有负担。</p><div class="foot"><span>★ 4.8</span><span>20 分钟</span></div></div></article>
    <article class="post"><div class="pic p3"></div><div class="pad"><div class="cat">汤羹</div><h3>番茄牛腩煲</h3><p>慢炖两小时，汤头酸甜浓厚，牛腩软烂入口即化。</p><div class="foot"><span>★ 5.0</span><span>120 分钟</span></div></div></article>
    <article class="post"><div class="pic p4"></div><div class="pad"><div class="cat">烘焙</div><h3>原味戚风蛋糕</h3><p>零塌陷配方，云朵般柔软，新手第一次也能成功。</p><div class="foot"><span>★ 4.9</span><span>60 分钟</span></div></div></article>
    <article class="post"><div class="pic p5"></div><div class="pad"><div class="cat">甜品</div><h3>紫薯芋泥啵啵</h3><p>绵密芋泥配 Q 弹小丸子，治愈系下午茶首选。</p><div class="foot"><span>★ 4.7</span><span>35 分钟</span></div></div></article>
    <article class="post"><div class="pic p6"></div><div class="pad"><div class="cat">家常菜</div><h3>清蒸鲈鱼</h3><p>鲜嫩不腥的秘诀全在火候与淋油，宴客有面子。</p><div class="foot"><span>★ 4.9</span><span>25 分钟</span></div></div></article>
  </div>
</section>

<section class="wrap">
  <div class="sub">
    <h2>每周三，收到一份新食谱</h2>
    <p>订阅食光记周刊，把当季最值得做的菜谱送到你的邮箱。</p>
    <form onsubmit="return false">
      <input type="email" placeholder="输入你的邮箱" required>
      <button type="submit">订阅</button>
    </form>
  </div>
</section>

<footer>© 2026 食光记 · 好好吃饭，好好生活</footer>
</body>
</html>

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