css制作博客

CSS 制作博客的关键步骤

布局设计 使用 display: flex 或 display: grid 构建响应式布局，主容器设置 max-width: 1200px 并居中。侧边栏宽度建议 25%，内容区 75%，通过媒体查询在移动端切换为堆叠布局。

配色方案 定义 CSS 变量统一主题色：

:root {
  --primary: #3498db;
  --secondary: #2ecc71;
  --dark: #2c3e50;
  --light: #ecf0f1;
}
body {
  background: var(--light);
  color: var(--dark);
}

排版优化 文章正文使用 line-height: 1.6 和 font-size: 1.1rem 提升可读性。标题层级设置 h1 { font-size: 2.5rem }，h2 { font-size: 2rem } 保持视觉层次。

交互元素 按钮样式示例：

.btn {
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.btn-primary {
  background: var(--primary);
  color: white;
}
.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

代码高亮 使用 Prism.js 或 Highlight.js 的 CSS 主题，例如：

pre[class*="language-"] {
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1rem 0;
  overflow-x: auto;
}

响应式处理 媒体查询断点示例：

@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }
  .sidebar, .content-area {
    width: 100%;
  }
}

性能优化 使用 will-change 属性提升动画性能，对静态资源添加 preload：

.animated-element {
  will-change: transform, opacity;
}

暗黑模式 通过 prefers-color-scheme 检测：

@media (prefers-color-scheme: dark) {
  :root {
    --light: #1a1a1a;
    --dark: #f5f5f5;
  }
}