css个人博客制作

设计布局结构

使用CSS Grid或Flexbox构建响应式布局。Grid适合复杂网格结构，Flexbox适合单向排列。定义header、main、footer等区域，通过媒体查询适配不同屏幕尺寸。

.container {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  min-height: 100vh;
}
header { grid-area: header; }
main { grid-area: main; }
footer { grid-area: footer; }

定制主题风格

选择主色调和辅助色，通过CSS变量统一管理颜色、字体等属性。添加暗黑模式支持，通过prefers-color-scheme或切换类名实现。

:root {
  --primary: #3498db;
  --bg: #f8f9fa;
}
.dark-mode {
  --primary: #2980b9;
  --bg: #2c3e50;
}
body {
  background: var(--bg);
  transition: background 0.3s;
}

美化文章内容

为博客正文设置可读性样式：限制行宽（max-width: 65ch）、调整行高（line-height: 1.6）、使用Web安全字体（如system-ui）。通过伪元素增强标题视觉效果。

article {
  max-width: 65ch;
  margin: 0 auto;
  font-family: system-ui;
}
h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: var(--primary);
}

添加交互效果

为导航链接和按钮设计悬停动画，使用transform和transition实现平滑效果。避免过度动画影响性能。

.nav-link {
  transition: transform 0.2s;
}
.nav-link:hover {
  transform: translateY(-2px);
}

优化移动端体验

使用视口单位（vw/vh）和相对字体大小（rem）。隐藏非必要元素，将导航栏折叠为汉堡菜单。确保触摸目标尺寸不小于48px×48px。

@media (max-width: 768px) {
  .menu { display: none; }
  .hamburger { display: block; }
}