2026.7.31 周四
遇到的挑战
1.margin问题
在写css过程中出现多余的margin,其实是浏览器默认样式导致的。浏览器会给 <p>、<h1>、<h4> 等标签默认添加上下外边距（margin-block-start 和 margin-block-end），这就是你在 DevTools 里看到的 margin: 14px 来源。
他的解决方案就是在你的 * 选择器里，把默认的 margin 和 padding 重置为 0：
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
2.未考虑到屏幕适配问题，反而把宽高写死
要求- Mobile: 375px - Desktop: 1440px
/* pc端 */
/* 原来是 width: 1440px; height: 960px; 改为 ↓ */
min-height: 100vh;
/* 移动端适配 */@media (max-width: 400px) {
.blog-preview-card {
width: 100%;
/* 不再固定 384px */
max-width: 327px;
/* 对齐 375px 设计稿 */
}
}
3.加载 Figtree 本地字体（`@font-face`）
Figtree 字体根本没加载！
你在 CSS 里写了 font-family: 'Figtree'，但 HTML 的 <head> 里既没有 Google Fonts 的 <link>，CSS 里也没有 @font-face 。字体文件虽然好好地躺在 assets/fonts/ 里，却完全没被使用。
后果：浏览器认不出 'Figtree'，会回退到系统默认字体（通常是 Times New Roman / 微软雅黑），整个卡片的字形、字间距和设计的差距会被明显放大------前面说的"视觉还原度 90%"其实是建立在字体生效的假设上的。
/* 在 <style> 最顶部加 @font-face */
@font-face {
font-family: 'Figtree';
src: url('./assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype');
font-weight: 100 1000; /* 变量字体，覆盖 500/800 */
font-display: swap;
}
以及一些小问题需要注意：
-
添加标题的 hover 交互效果（黄色高亮 + 光标变化）
-
将 `<h4>` 标签替换为更符合语义的 `<span>` / `<p>`
-
修正 `img` 的 `alt` 属性为有意义的描述
-
将 CSS 抽离到独立的 `style.css` 文件
-
添加 `<main>` 语义地标