css制作个人博客

设计博客布局

使用CSS Grid或Flexbox创建响应式布局。Grid适合多列复杂结构，Flexbox适合单行或单列排列。定义头部、导航栏、内容区、侧边栏和页脚的基本结构。

body {
  display: grid;
  grid-template-areas:
    "header header"
    "nav nav"
    "main sidebar"
    "footer footer";
  grid-template-columns: 3fr 1fr;
  gap: 20px;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: sidebar; }
footer { grid-area: footer; }

定制主题颜色与字体

通过CSS变量统一管理主题色和字体，便于全局调整。选择易读的字体组合，如system-ui作为备选方案。

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

美化文章卡片样式

为博客文章添加卡片式设计，包含阴影、圆角和悬停效果。使用transition增强交互感。

.article-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.3s;
}
.article-card:hover {
  transform: translateY(-5px);
}

实现导航栏交互

固定导航栏位置，添加下拉菜单效果。使用伪类:hover触发二级菜单显示，避免依赖JavaScript。

nav {
  position: sticky;
  top: 0;
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.dropdown {
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  background: white;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.dropdown:hover .dropdown-content {
  display: block;
}

优化移动端显示

通过媒体查询调整布局和字体大小，确保在小屏幕上体验良好。侧边栏可改为底部显示以节省空间。

@media (max-width: 768px) {
  body {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
  .article-card {
    padding: 15px;
  }
}