css制作个人博客

CSS制作个人博客的关键步骤

设计布局结构
使用CSS Grid或Flexbox构建响应式布局。Grid适合整体页面框架，Flexbox适合局部元素排列。

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
}

设置颜色与字体
定义CSS变量统一主题色，通过@import引入Google Fonts等外部字体。

:root {
  --primary-color: #3498db;
  --font-main: 'Open Sans', sans-serif;
}
body {
  font-family: var(--font-main);
  color: #333;
}

导航栏样式
使用Flexbox水平排列导航项，添加悬停效果。

.navbar {
  display: flex;
  background: var(--primary-color);
}
.nav-item:hover {
  background: rgba(255,255,255,0.2);
}

文章卡片设计
通过box-shadow增加层次感，设置圆角边框。

.post-card {
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 20px;
  margin-bottom: 30px;
}

响应式处理
使用媒体查询适配移动设备，调整布局和字体大小。

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
  body {
    font-size: 14px;
  }
}

动画与交互效果
为按钮和链接添加过渡效果，增强用户体验。

.button {
  transition: all 0.3s ease;
}
.button:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

代码高亮支持
使用Prism.js等库的CSS主题或自定义样式。

code {
  font-family: 'Fira Code', monospace;
  background: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
}