Spaces:
Running
Running
| <html lang="zh"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>旅行与交通 · 中西双语词卡</title> | |
| <style> | |
| body { font-family: sans-serif; background:#f9fafb; margin:0; padding:20px;} | |
| h1 { font-size:24px; margin-bottom:8px; } | |
| p.desc { font-size:14px; color:#555; margin-bottom:20px;} | |
| .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px;} | |
| .card { background:#fff; border:1px solid #ddd; border-radius:16px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.1);} | |
| .icon { display:flex; justify-content:center; align-items:center; background:#f3f4f6; height:140px;} | |
| .content { padding:12px;} | |
| .pinyin { font-size:12px; color:#666; } | |
| .hanzi { font-size:20px; font-weight:bold; margin-top:4px;} | |
| .es { font-size:16px; color:#333; margin-top:4px;} | |
| .example { font-size:13px; color:#555; margin-top:6px;} | |
| svg { width:64px; height:64px; stroke:#333; fill:none; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>旅行与交通 · 中西双语词卡</h1> | |
| <p class="desc">静态HTML版，中西双语例词，带简易图标。</p> | |
| <div class="grid"> | |
| <!-- Example card: 飞机 --> | |
| <div class="card"> | |
| <div class="icon"> | |
| <svg viewBox="0 0 64 64"><path d="M6 38l26-6 24-16 4 4-16 24-6 26-6-10-8-8-10-6 12-4z" stroke-width="3"/></svg> | |
| </div> | |
| <div class="content"> | |
| <div class="pinyin">fēijī</div> | |
| <div class="hanzi">飞机</div> | |
| <div class="es">avión</div> | |
| <div class="example">例句：我们明天坐飞机去北京。</div> | |
| </div> | |
| </div> | |
| <!-- 火车 --> | |
| <div class="card"> | |
| <div class="icon"> | |
| <svg viewBox="0 0 64 64"> | |
| <rect x="12" y="12" width="40" height="28" rx="6" stroke-width="3"/> | |
| <circle cx="22" cy="46" r="4" fill="#333"/> | |
| <circle cx="42" cy="46" r="4" fill="#333"/> | |
| </svg> | |
| </div> | |
| <div class="content"> | |
| <div class="pinyin">huǒchē</div> | |
| <div class="hanzi">火车</div> | |
| <div class="es">tren</div> | |
| <div class="example">例句：这班火车八点出发。</div> | |
| </div> | |
| </div> | |
| <!-- 高铁 --> | |
| <div class="card"> | |
| <div class="icon"> | |
| <svg viewBox="0 0 64 64"> | |
| <rect x="12" y="12" width="40" height="28" rx="6" stroke-width="3"/> | |
| <circle cx="22" cy="46" r="4" fill="#333"/> | |
| <circle cx="42" cy="46" r="4" fill="#333"/> | |
| </svg> | |
| </div> | |
| <div class="content"> | |
| <div class="pinyin">gāotiě</div> | |
| <div class="hanzi">高铁</div> | |
| <div class="es">tren de alta velocidad</div> | |
| <div class="example">例句：高铁很快，也很准时。</div> | |
| </div> | |
| </div> | |
| <!-- 汽车 --> | |
| <div class="card"> | |
| <div class="icon"> | |
| <svg viewBox="0 0 64 64"> | |
| <rect x="12" y="28" width="40" height="12" rx="6" stroke-width="3"/> | |
| <path d="M18 28 L28 22 H46 L52 28" stroke-width="3"/> | |
| <circle cx="22" cy="44" r="4" fill="#333"/> | |
| <circle cx="46" cy="44" r="4" fill="#333"/> | |
| </svg> | |
| </div> | |
| <div class="content"> | |
| <div class="pinyin">qìchē</div> | |
| <div class="hanzi">汽车</div> | |
| <div class="es">coche</div> | |
| <div class="example">例句：我开汽车去上班。</div> | |
| </div> | |
| </div> | |
| <!-- 公交车 --> | |
| <div class="card"> | |
| <div class="icon"> | |
| <svg viewBox="0 0 64 64"> | |
| <rect x="8" y="16" width="48" height="24" rx="4" stroke-width="3"/> | |
| <circle cx="22" cy="44" r="4" fill="#333"/> | |
| <circle cx="42" cy="44" r="4" fill="#333"/> | |
| </svg> | |
| </div> | |
| <div class="content"> | |
| <div class="pinyin">gōngjiāochē</div> | |
| <div class="hanzi">公交车</div> | |
| <div class="es">autobús</div> | |
| <div class="example">例句：我们坐公交车去市中心。</div> | |
| </div> | |
| </div> | |
| <!-- 自行车 --> | |
| <div class="card"> | |
| <div class="icon"> | |
| <svg viewBox="0 0 64 64"> | |
| <circle cx="18" cy="44" r="8" stroke-width="3"/> | |
| <circle cx="46" cy="44" r="8" stroke-width="3"/> | |
| <path d="M18 44 L28 28 L36 44 L46 44" stroke-width="3"/> | |
| </svg> | |
| </div> | |
| <div class="content"> | |
| <div class="pinyin">zìxíngchē</div> | |
| <div class="hanzi">自行车</div> | |
| <div class="es">bicicleta</div> | |
| <div class="example">例句：他每天骑自行车去学校。</div> | |
| </div> | |
| </div> | |
| <!-- 摩托车 --> | |
| <div class="card"> | |
| <div class="icon"> | |
| <svg viewBox="0 0 64 64"> | |
| <circle cx="18" cy="44" r="8" stroke-width="3"/> | |
| <circle cx="46" cy="44" r="8" stroke-width="3"/> | |
| <path d="M18 44 L28 28 L36 44 L46 44" stroke-width="3"/> | |
| </svg> | |
| </div> | |
| <div class="content"> | |
| <div class="pinyin">mótuōchē</div> | |
| <div class="hanzi">摩托车</div> | |
| <div class="es">moto</div> | |
| <div class="example">例句：他买了一辆新的摩托车。</div> | |
| </div> | |
| </div> | |
| <!-- 地铁 --> | |
| <div class="card"> | |
| <div class="icon"> | |
| <svg viewBox="0 0 64 64"> | |
| <rect x="16" y="16" width="32" height="22" rx="4" stroke-width="3"/> | |
| <path d="M14 42 H50" stroke-width="3"/> | |
| </svg> | |
| </div> | |
| <div class="content"> | |
| <div class="pinyin">dìtiě</div> | |
| <div class="hanzi">地铁</div> | |
| <div class="es">metro</div> | |
| <div class="example">例句：地铁在早上很拥挤。</div> | |
| </div> | |
| </div> | |
| <!-- 轮船 --> | |
| <div class="card"> | |
| <div class="icon"> | |
| <svg viewBox="0 0 64 64"> | |
| <path d="M10 40h44l-6 8H16z" stroke-width="3"/> | |
| <rect x="24" y="24" width="16" height="10" stroke-width="3"/> | |
| <path d="M32 24 V16" stroke-width="3"/> | |
| </svg> | |
| </div> | |
| <div class="content"> | |
| <div class="pinyin">lúnchuán</div> | |
| <div class="hanzi">轮船</div> | |
| <div class="es">barco</div> | |
| <div class="example">例句：我们坐轮船去岛上。</div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |