宝宝喂养记录表怎么做

直接给你一个做好的手机适配版记录表。复制下面代码，保存成 宝宝喂养记录.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>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
  <style>
    * { box-sizing: border-box; }
    body {
      font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
      background: #f5f5f5;
      margin: 0;
      padding: 10px;
      color: #222;
    }
    .page { max-width: 520px; margin: 0 auto; }
    h1 { font-size: 20px; text-align: center; }
    h2 { font-size: 17px; margin: 8px 0; }
    .card {
      background: #fff;
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 12px;
      box-shadow: 0 1px 4px rgba(0,0,0,.08);
    }
    label { font-size: 14px; color: #555; display: block; margin: 8px 0 4px; }
    input, textarea {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
    textarea { min-height: 60px; }
    .row { display: flex; gap: 8px; }
    .row > div { flex: 1; }
    .feed-row {
      display: flex;
      gap: 6px;
      margin-bottom: 6px;
      align-items: center;
    }
    .feed-row input[type="time"] { width: 90px; flex: none; }
    .feed-row input[type="number"] { flex: 1; }
    .spit {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      white-space: nowrap;
      margin: 0;
      color: #333;
    }
    .spit input { width: auto; margin: 0; }
    .btn {
      background: #2a7de1;
      color: #fff;
      border: none;
      padding: 12px;
      border-radius: 10px;
      font-size: 16px;
      width: 100%;
      margin-top: 12px;
    }
    .btn-small {
      background: #eee;
      color: #333;
      border: none;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 13px;
    }
    .del-btn {
      background: #c62828;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 5px 8px;
      font-size: 12px;
    }
    .table-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
    th, td { border: 1px solid #ddd; padding: 6px; text-align: center; }
    th { background: #f0f7ff; }
    .red { background: #ffe5e5 !important; color: #c62828; font-weight: bold; }
    .sub { font-size: 11px; color: #555; }
    .note { font-size: 12px; color: #888; margin-top: 6px; }
    .msg { color: #2e7d32; font-size: 14px; text-align: center; padding: 6px; }
    .chart-box { height: 220px; position: relative; margin-top: 10px; }
  </style>
</head>
<body>

  <h1>🍼 宝宝喂养记录表</h1>

  

  

    <h2>今天记一笔</h2>
    <label>日期</label>
    <input id="date" type="date">

    

      

        <label>体重（kg）</label>
        <input id="weight" type="number" step="0.01" value="4.1">
      

      

        <label>体脂率%（选填）</label>
        <input id="bodyFat" type="number" step="0.1">
      

    

    <label>喂奶记录</label>
    

    
    

    <label>大便次数</label>
    <input id="stool" type="number" min="0" step="1">

    <label>备注</label>
    <textarea id="note" placeholder=