情趣内衣秀-迈阿密艺术节
beauty小姐
用户投稿
管理员
发布于：2026年06月14日
1 阅读 · 0 评论
Beauty小姐 · 实用指南流 我来为你打造一个具有杂志编辑质感的实用美妆指南页面。
标签:
用户投稿
管理员
发布于：2026年06月14日
1 阅读 · 0 评论
情趣内衣秀-迈阿密艺术节
html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Beauty小姐 · 实用指南流</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,500;0,700;1,400&family=Noto+Serif+SC:wght@300;400;600;700&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet"> <style> :root { --bg: #faf6f1; --bg-deep: #f3ece2; --surface: #ffffff; --accent: #c47d5a; --accent-light: #e8b89a; --accent-dark: #8b4f35; --text-primary: #2a1f1a; --text-body: #4a3f38; --text-muted: #9a8e85; --border: #e6ddd3; --rose: #d4918e; --sage: #a3b5a0; --cream: #f5e6d3; --gold: #c9a96e; --radius: 2px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Noto Serif SC', serif; background: var(--bg); color: var(--text-body); line-height: 1.8; overflow-x: hidden; } body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; } ::selection { background: var(--accent-light); color: var(--text-primary); } /* ========== HEADER ========== */ .header { padding: 2.5rem 3rem 2rem; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--border); position: relative; } .header::after { content: ''; position: absolute; bottom: -3px; left: 3rem; width: 60px; height: 3px; background: var(--accent); } .brand { display: flex; flex-direction: column; gap: 0.3rem; } .brand-name { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.15em; color: var(--text-primary); line-height: 1; } .brand-sub { font-size: 0.7rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--text-muted); font-family: 'DM Mono', monospace; } .header-meta { text-align: right; font-family: 'DM Mono', monospace; font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.05em; line-height: 2; } /* ========== HERO ========== */ .hero { padding: 5rem 3rem 4rem; max-width: 800px; position: relative; } .hero-label { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; } .hero-label::before { content: ''; width: 40px; height: 1px; background: var(--accent); } .hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.8rem, 5vw, 4.2rem); font-weight: 300; line-height: 1.15; color: var(--text-primary); margin-bottom: 2rem; letter-spacing: -0.01em; } .hero h1 em { font-style: italic; color: var(--accent); } .hero-intro { font-size: 1rem; line-height: 2; color: var(--text-muted); max-width: 560px; font-weight: 300; } /* ========== DIVIDER ========== */ .divider { margin: 0 3rem; border: none; height: 1px; background: linear-gradient(to right, var(--border), transparent); } /* ========== FLOW SECTION ========== */ .flow { padding: 4rem 3rem; } .flow-header { display: flex; align-items: baseline; gap: 1.5rem; margin-bottom: 3rem; } .flow-number { font-family: 'Cormorant Garamond', serif; font-size: 4rem; font-weight: 300; color: var(--accent-light); line-height: 1; opacity: 0.6; } .flow-title-group { display: flex; flex-direction: column; gap: 0.3rem; } .flow-step-label { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-muted); } .flow-title { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 500; color: var(--text-primary); } /* ========== GUIDE CARDS ========== */ .guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; } .guide-card { background: var(--surface); border: 1px solid var(--border); padding: 2rem; position: relative; transition: transform 0.4s ease, box-shadow 0.4s ease; opacity: 0; animation: fadeUp 0.6s ease forwards; } .guide-card:nth-child(2) { animation-delay: 0.1s; } .guide-card:nth-child(3) { animation-delay: 0.2s; } .guide-card:nth-child(4) { animation-delay: 0.3s; } .guide-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(42, 31, 26, 0.08); } .guide-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(to right, var(--accent), var(--accent-light)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .guide-card:hover::before { transform: scaleX(1); } .card-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; margin-bottom: 1.2rem; border: 1px solid var(--border); color: var(--accent); } .card-title { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.8rem; } .card-desc { font-size: 0.85rem; line-height: 1.9; color: var(--text-muted); font-weight: 300; } .card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.2rem; } .tag { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.08em; padding: 0.25rem 0.7rem; border: 1px solid var(--border); color: var(--text-muted); transition: all 0.3s ease; } .tag:hover { border-color: var(--accent); color: var(--accent); background: rgba(196, 125, 90, 0.05); } /* ========== FEATURED TIP ========== */ .featured-tip { background: var(--text-primary); color: var(--bg); margin: 3rem; padding: 3.5rem; display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center; position: relative; overflow: hidden; opacity: 0; animation: fadeUp 0.8s ease 0.4s forwards; } .featured-tip::before { content: '✦'; position: absolute; top: -30px; right: -20px; font-size: 12rem; opacity: 0.03; color: var(--bg); line-height: 1; } .tip-number { font-family: 'Cormorant Garamond', serif; font-size: 6rem; font-weight: 300; color: var(--accent); line-height: 1; opacity: 0.5; } .tip-content { display: flex; flex-direction: column; gap: 1rem; } .tip-label { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-light); } .tip-text { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; line-height: 1.6; color: rgba(250, 246, 241, 0.9); font-style: italic; } .tip-source { font-family: 'DM Mono', monospace; font-size: 0.65rem; color: var(--text-muted); letter-spacing: 0.1em; margin-top: 0.5rem; } /* ========== TIMELINE ========== */ .timeline { padding: 4rem 3rem; } .timeline-header { text-align: center; margin-bottom: 3.5rem; } .timeline-header h2 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 300; color: var(--text-primary); margin-bottom: 0.5rem; } .timeline-header p { font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--text-muted); text-transform: uppercase; } .timeline-list { max-width: 700px; margin: 0 auto; position: relative; } .timeline-list::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 1px; background: var(--border); } .timeline-item { display: grid; grid-template-columns: 40px 1fr; gap: 2rem; padding-bottom: 2.5rem; position: relative; opacity: 0; animation: fadeUp 0.5s ease forwards; } .timeline-item:nth-child(1) { animation-delay: 0.1s; } .timeline-item:nth-child(2) { animation-delay: 0.2s; } .timeline-item:nth-child(3) { animation-delay: 0.3s; } .timeline-item:nth-child(4) { animation-delay: 0.4s; } .timeline-item:nth-child(5) { animation-delay: 0.5s; } .timeline-item:nth-child(6) { animation-delay: 0.6s; } .timeline-item:nth-child(7) { animation-delay: 0.7s; } .tl-dot { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); border-radius: 50%; font-family: 'DM Mono', monospace; font-size: 0.65rem; color: var(--text-muted); position: relative; z-index: 1; transition: all 0.3s ease; } .timeline-item:hover .tl-dot { border-color: var(--accent); color: var(--accent); background: var(--surface); } .tl-content { padding-top: 0.5rem; } .tl-time { font-family: 'DM Mono', monospace; font-size: 0.6rem; letter-spacing: 0.15em; color: var(--accent); margin-bottom: 0.3rem; text-transform: uppercase; } .tl-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.3rem; } .tl-desc { font-size: 0.82rem; color: var(--text-muted); font-weight: 300; line-height: 1.8; } /* ========== PRODUCT PICKS ========== */ .picks { padding: 4rem 3rem; background: var(--bg-deep); } .picks-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .picks-title { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 500; color: var(--text-primary); } .picks-count { font-family: 'DM Mono', monospace; font-size: 0.65rem; color: var(--text-muted); letter-spacing: 0.1em; } .pick-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 1.5rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--border); transition: all 0.3s ease; cursor: default; opacity: 0; animation: fadeUp 0.5s ease forwards; } .pick-row:nth-child(1) { animation-delay: 0.15s; } .pick-row:nth-child(2) { animation-delay: 0.25s; } .pick-row:nth-child(3) { animation-delay: 0.35s; } .pick-row:nth-child(4) { animation-delay: 0.45s; } .pick-row:hover { padding-left: 1rem; background: rgba(255,255,255,0.4); } .pick-rank { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 300; color: var(--accent-light); text-align: center; line-height: 1; } .pick-info { display: flex; flex-direction: column; gap: 0.2rem; } .pick-name { font-weight: 600; color: var(--text-primary); font-size: 0.95rem; } .pick-detail { font-size: 0.78rem; color: var(--text-muted); font-weight: 300; } .pick-score { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 300; color: var(--accent); } .pick-score small { font-size: 0.6rem; font-family: 'DM Mono', monospace; color: var(--text-muted); display: block; text-align: right; letter-spacing: 0.1em; } /* ========== TIPS SIDEBAR ========== */ .sidebar-section { padding: 4rem 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } .sidebar-block { display: flex; flex-direction: column; gap: 1rem; } .sidebar-title { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600; color: var(--text-primary); padding-bottom: 0.8rem; border-bottom: 2px solid var(--accent); display: inline-block; } .do-item, .dont-item { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.85rem; line-height: 1.7; font-weight: 300; } .do-icon, .dont-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; border-radius: 50%; margin-top: 0.2rem; } .do-icon { background: rgba(163, 181, 160, 0.2); color: var(--sage); border: 1px solid var(--sage); } .dont-icon { background: rgba(212, 145, 142, 0.2); color: var(--rose); border: 1px solid var(--rose); } /* ========== NEWSLETTER ========== */ .newsletter { margin: 2rem 3rem 4rem; padding: 3rem; background: linear-gradient(135deg, var(--cream) 0%, var(--bg) 100%); border: 1px solid var(--border); text-align: center; position: relative; } .newsletter::before, .newsletter::after { content: '·'; position: absolute; font-size: 2rem; color: var(--accent-light); opacity: 0.4; } .newsletter::before { top: 1rem; left: 2rem; } .newsletter::after { bottom: 1rem; right: 2rem; } .newsletter h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 300; color: var(--text-primary); margin-bottom: 0.5rem; } .newsletter p { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.5rem; font-weight: 300; } .newsletter-form { display: flex; max-width: 420px; margin: 0 auto; gap: 0.5rem; } .newsletter-form input { flex: 1; padding: 0.8rem 1.2rem; border: 1px solid var(--border); background: var(--surface); font-family: 'DM Mono', monospace; font-size: 0.75rem; color: var(--text-body); outline: none; transition: border-color 0.3s ease; } .newsletter-form input::placeholder { color: var(--text-muted); letter-spacing: 0.05em; } .newsletter-form input:focus { border-color: var(--accent); } .newsletter-form button { padding: 0.8rem 1.8rem; background: var(--text-primary); color: var(--bg); border: none; font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; } .newsletter-form button:hover { background: var(--accent); letter-spacing: 0.25em; } /* ========== FOOTER ========== */ .footer { padding: 2.5rem 3rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .footer-brand { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 300; letter-spacing: 0.1em; color: var(--text-muted); } .footer-links { display: flex; gap: 2rem; list-style: none; } .footer-links a { font-family: 'DM Mono', monospace; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: color 0.3s ease; } .footer-links a:hover { color: var(--accent); } /* ========== ANIMATIONS ========== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ========== RESPONSIVE ========== */ @media (max-width: 768px) { .header, .hero, .flow, .picks, .sidebar-section, .newsletter, .footer, .timeline { padding-left: 1.5rem; padding-right: 1.5rem; } .divider { margin: 0 1.5rem; } .featured-tip { margin: 2rem 1.5rem; padding: 2rem; grid-template-columns: 1fr; gap: 1rem; } .tip-number { font-size: 3rem; } .guide-grid { grid-template-columns: 1fr; } .sidebar-section { grid-template-columns: 1fr; } .pick-row { grid-template-columns: 50px 1fr auto; } .newsletter-form { flex-direction: column; } .footer { flex-direction: column; gap: 1rem; } .hero h1 { font-size: 2.2rem; } .header { flex-direction: column; align-items: flex-start; gap: 1rem; } .header-meta { text-align: left; } } </style> </head> <body> <!-- HEADER --> <header class="header"> <div class="brand"> <div class="brand-name">Beauty小姐</div> <div class="brand-sub">The Practical Beauty Guide</div> </div> <div class="header-meta"> VOL. 47 · 2026 春夏刊<br> 实用指南流 · 第四期 </div> </header> <!-- HERO --> <section class="hero"> <div class="hero-label">本期专题</div> <h1>从晨间到深夜，<br>一套<em>不踩雷</em>的<br>护肤流水线</h1> <p class="hero-intro"> 美妆不是玄学，我们拆解了上百个成分表，访谈了 12 位皮肤科医生，只为给你一份可以用到明年夏天的实用清单，不追风口，只认成分。 </p> </section> <hr class="divider"> <!-- FLOW 01: CLEANSE --> <section class="flow" id="cleanse"> <div class="flow-header"> <span class="flow-number">01</span> <div class="flow-title-group"> <span class="flow-step-label">Step One · 洁面</span> <h2 class="flow-title">洗对脸，比涂什么重要</h2> </div> </div> <div class="guide-grid"> <div class="guide-card"> <div class="card-icon">☀</div> <div class="card-title">晨间 · 温和为上</div> <div class="card-desc"> 清晨皮肤油脂是天然保护层，用 32–34°C 温水，搭配氨基酸洁面乳，轻揉 30 秒即可，不要追求"洗完咯吱响"的干涩感。 </div> <div class="card-tags"> <span class="tag">氨基酸</span> <span class="tag">PH 5.5</span> <span class="tag">30秒</span> </div> </div> <div class="guide-card"> <div class="card-icon">🌙</div> <div class="card-title">夜间 · 分区卸妆</div> <div class="card-desc"> 防晒需要卸妆，但不必全脸乳化，眼唇用专用卸妆液，面部用卸妆油乳化后，再跟一次氨基酸洁面，两步走，不伤屏障。 </div> <div class="card-tags"> <span class="tag">分区法</span> <span class="tag">双重清洁</span> <span class="tag">屏障友好</span> </div> </div> <div class="guide-card"> <div class="card-icon">⚠</div> <div class="card-title">皂基的真相</div> <div class="card-desc"> 皂基洁面清洁力强，但长期使用会破坏皮脂膜，如果你是干敏皮，看到"肉豆蔻酸""月桂酸钠"排名靠前，请直接跳过。 </div> <div class="card-tags"> <span class="tag">成分避雷</span> <span class="tag">干敏皮</span> </div> </div> <div class="guide-card"> <div class="card-icon">✓</div> <div class="card-title">水温自测法</div> <div class="card-desc"> 手腕内侧皮肤薄，对温度敏感，用它试水温：感觉微温不凉不烫，就是洁面最佳温度，过热加速水分蒸发，过冷清洁力不足。 </div> <div class="card-tags"> <span class="tag">小技巧</span> <span class="tag">零成本</span> </div> </div> </div> </section> <!-- FEATURED TIP --> <div class="featured-tip"> <div class="tip-number">①</div> <div class="tip-content"> <div class="tip-label">编辑部心选</div> <div class="tip-text">"护肤的第一步不是买产品，是读懂自己的皮肤，干、油、混合、敏感——先把这张牌翻对了，后面才不会白花冤枉钱。"</div> <div class="tip-source">— Beauty小姐 编辑部 · 皮肤科顾问 陈医生</div> </div> </div> <!-- FLOW 02: ACTIVES --> <section class="flow" id="actives"> <div class="flow-header"> <span class="flow-number">02</span> <div class="flow-title-group"> <span class="flow-step-label">Step Two · 功效精华</span> <h2 class="flow-title">成分不叠加，是最大的功课</h2> </div> </div> <div class="guide-grid"> <div class="guide-card"> <div class="card-icon">A</div> <div class="card-title">早C晚A，依然有效</div> <div class="card-desc"> 维C（L-抗坏血酸）白天抗氧化，维A醇夜间促代谢，这对黄金搭档依然是经循证最扎实的抗老组合，但浓度需要循序渐进。 </div> <div class="card-tags"> <span class="tag">早C晚A</span> <span class="tag">循证</span> <span class="tag">抗老</span> </div> </div> <div class="guide-card"> <div class="card-icon">✦</div> <div class="card-title">烟酰胺的甜区</div> <div class="card-desc"> 3%–5% 浓度的烟酰胺兼顾美白与控油，且刺激性低，超过 10% 并不会效果翻倍，反而增加泛红风险，别被数字营销带偏。 </div> <div class="card-tags"> <span class="tag">烟酰胺</span> <span class="tag">浓度陷阱</span> </div> </div> <div class="guide-card"> <div class="card-icon">✕</div> <div class="card-title">别叠的组合</div> <div class="card-desc"> 维C + 烟酰胺同用可能降低活性（新版配方改善但仍有争议），维A醇 + 酸类 = 烂脸预警，不确定时，早晚分开用最安全。 </div> <div class="card-tags"> <span class="tag">成分冲突</span> <span class="tag">安全搭配</span> </div> </div> <div class="guide-card"> <div class="card-icon">⏱</div> <div class="card-title">见效时间表</div> <div class="card-desc"> 保湿：即刻感受，美白：4–8 周，抗皱：12 周起步，祛痘：6–8 周，任何承诺"7天换脸"的产品，建议保持怀疑。 </div> <div class="card-tags"> <span class="tag">理性预期</span> <span class="tag">时间线</span> </div> </div> </div> </section> <hr class="divider"> <!-- FLOW 03: PROTECT --> <section class="flow" id="protect"> <div class="flow-header"> <span class="flow-number">03</span> <div class="flow-title-group"> <span class="flow-step-label">Step Three · 防晒与封层</span> <h2 class="flow-title">不防晒，前面都白费</h2> </div> </div> <div class="guide-grid"> <div class="guide-card"> <div class="card-icon">☀</div> <div class="card-title">防晒用量是关键</div> <div class="card-desc"> 面部标准用量约一元硬币大小（约 1g），用量不足则SPF值大幅缩水，室内靠窗也需要防晒，UVA 可穿透玻璃。 </div> <div class="card-tags"> <span class="tag">1g法则</span> <span class="tag">UVA</span> </div> </div> <div class="guide-card"> <div class="card-icon">💧</div> <div class="card-title">保湿霜 · 锁住一切</div> <div class="card-desc"> 面霜是护肤最后一步，功能是"封层"，神经酰胺、角鲨烷、透明质酸都是好成分，油皮可选凝露质地，干皮选乳霜。 </div> <div class="card-tags"> <span class="tag">封层</span> <span class="tag">按肤质选</span> </div> </div> </div> </section> <!-- DAY TIMELINE --> <section class="timeline"> <div class="timeline-header"> <h2>一日护肤时间轴</h2> <p>Morning to Night · 按步骤走</p> </div> <div class="timeline-list"> <div class="timeline-item"> <div class="tl-dot">7:00</div> <div class="tl-content"> <div class="tl-time">清晨</div> <div class="tl-title">温水 + 氨基酸洁面</div> <div class="tl-desc">轻揉 30 秒，T 区略加力度，两颊一带而过</div> </div> </div> <div class="timeline-item"> <div class="tl-dot">7:05</div> <div class="tl-content"> <div class="tl-time">精华</div> <div class="tl-title">维C精华 + 保湿精华</div> <div class="tl-desc">先水状后乳状，等 1 分钟让维C吸收</div> </div> </div> <div class="timeline-item"> <div class="tl-dot">7:10</div> <div class="tl-content"> <div class="tl-time">封层</div> <div class="tl-title">面霜 + 防晒</div> <div class="tl-desc">面霜成膜后上防晒，打圈涂抹不要拍打</div> </div> </div> <div class="timeline-item"> <div class="tl-dot">12:30</div> <div class="tl-content"> <div class="tl-time">午间</div> <div class="tl-title">补涂防晒</div> <div class="tl-desc">户外每 2 小时补涂，室内靠窗午间补一次</div> </div> </div> <div class="timeline-item"> <div class="tl-dot">21:00</div> <div class="tl-content"> <div class="tl-time">夜间</div> <div class="tl-title">卸妆 + 洁面</div> <div class="tl-desc">双重清洁法：卸妆油 → 氨基酸洁面</div> </div> </div> <div class="timeline-item"> <div class="tl-dot">21:10</div> <div class="tl-content"> <div class="tl-time">修复</div> <div class="tl-title">维A醇精华 + 修护面霜</div> <div class="tl-desc">A醇避开眼周，新手每周 2 次起步</div> </div> </div> <div class="timeline-item"> <div class="tl-dot">21:15</div> <div class="tl-content"> <div class="tl-time">加分项</div> <div class="tl-title">眼霜 + 唇膜</div> <div class="tl-desc">无名指点涂眼霜，唇膜厚涂过夜</div> </div> </div> </div> </section> <hr class="divider"> <!-- PRODUCT PICKS --> <section class="picks"> <div class="picks-header"> <h2 class="picks-title">编辑部实测 · 平价之选</h2> <span class="picks-count">2026 SPRING · TOP PICKS</span> </div> <div class="pick-row"> <div class="pick-rank">01</div> <div class="pick-info"> <div class="pick-name">珂润润浸保湿洁颜泡沫</div> <div class="pick-detail">氨基酸系 · 敏感肌友好 · 神经酰胺配方 · 150ml</div> </div> <div class="pick-score">9.2<small>/10 综合</small></div> </div> <div class="pick-row"> <div class="pick-rank">02</div> <div class="pick-info"> <div class="pick-name">乐敦CC 美容液</div> <div class="pick-detail">活性维C · 清爽油状 · 提亮抗氧 · 20ml</div> </div> <div class="pick-score">8.8<small>/10 综合</small></div> </div> <div class="pick-row"> <div class="pick-rank">03</div> <div class="pick-info"> <div class="pick-name">薇诺娜舒敏保湿特护霜</div> <div class="pick-detail">马齿苋提取 · 屏障修护 · 不含香精 · 50g</div> </div> <div class="pick-score">8.6<small>/10 综合</small></div> </div> <div class="pick-row"> <div class="pick-rank">04</div> <div class="pick-info"> <div class="pick-name">碧柔水活防晒柔润凝蜜</div> <div class="pick-detail">SPF50+ PA++++ · 水感质地 · 不泛白 · 50g</div> </div> <div class="pick-score">8.5<small>/10 综合</small></div> </div> </section> <!-- DO & DON'T --> <section class="sidebar-section"> <div class="sidebar-block"> <h3 class="sidebar-title">✓ 建议这样做</h3> <div class="do-item"> <span class="do-icon">✓</span> <span>新产品先在耳后试用 24 小时，无反应再上脸</span> </div> <div class="do-item"> <span class="do-icon">✓</span> <span>功效产品从低浓度开始，给皮肤 2–4 周适应期</span> </div> <div class="do-item"> <span class="do-icon">✓</span> <span>护肤品开封后注意保质期，多数精华建议 6–12 个月内用完</span> </div> <div class="do-item"> <span class="do-icon">✓</span> <span>颈部也要涂防晒和面霜，它是年龄的"泄密者"</span> </div> <div class="do-item"> <span class="do-icon">✓</span> <span>换季时精简步骤，用最基础的洁面 + 保湿 + 防晒</span> </div> </div> <div class="sidebar-block"> <h3 class="sidebar-title">✕ 不建议这样做</h3> <div class="dont-item"> <span class="dont-icon">✕</span> <span>频繁去角质（每周超过 1 次），物理磨砂和酸类不要同天用</span> </div> <div class="dont-item"> <span class="dont-icon">✕</span> <span>跟风买"贵妇面霜"，不看成分只看价格和包装</span> </div> <div class="dont-item"> <span class="dont-icon">✕</span> <span>用化妆水时大力拍脸，轻拍或湿敷才是正确方式</span> </div> <div class="dont-item"> <span class="dont-icon">✕</span> <span>囤货超过半年用量，活性成分会随时间降解</span> </div> <div class="dont-item"> <span class="dont-icon">✕</span> <span>带妆运动、带妆睡觉，毛孔堵塞是爆痘元凶</span> </div> </div> </section> <!-- NEWSLETTER --> <section class="newsletter"> <h3>订阅 Beauty小姐 周刊</h3> <p>每周五一封，只讲干货，不卖焦虑，成分解读 + 真实测评 + 限时好价。</p> <form class="newsletter-form" onsubmit="event.preventDefault(); this.querySelector('button').textContent='已订阅 ✦'; this.querySelector('button').style.background='var(--sage)';"> <input type="email" placeholder="your@email.com" required> <button type="submit">订阅</button> </form> </section> <!-- FOOTER --> <footer class="footer"> <div class="footer-brand">Beauty小姐 · 实用指南流</div> <ul class="footer-links"> <li><a href="#cleanse">洁面</a></li> <li><a href="#actives">精华</a></li> <li><a href="#protect">防晒</a></li> </ul> </footer> </body> </html> --- 页面涵盖了完整的实用护肤指南流： 洁面 → 精华 → 防晒封层，三大阶段各有拆解卡片，搭配一日护肤时间轴、编辑部平价实测榜单、Do / Don't 清单，以及邮件订阅模块。 设计上走的是暖调编辑杂志风——Cormorant Garamond + Noto Serif SC 的中西字体搭配，奶油底色配赤陶色调点缀，卡片有悬浮动效和顶部色条动画，整套视觉既克制又精致。
