css怎么制作个人主页

设计布局结构

使用CSS的Flexbox或Grid布局创建响应式设计。Flexbox适合一维布局，Grid适合二维布局。定义容器和子元素的排列方式，确保在不同屏幕尺寸下都能良好显示。

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

设置基础样式

定义全局样式，包括字体、颜色和间距。使用CSS变量便于统一管理主题色和字体大小。

:root {
  --primary-color: #3498db;
  --text-color: #333;
}

body {
  font-family: 'Arial', sans-serif;
  color: var(--text-color);
  line-height: 1.6;
}

创建导航栏

使用固定定位或弹性布局设计导航栏。添加悬停效果增强交互性，确保导航链接在不同设备上可访问。

.navbar {
  background-color: var(--primary-color);
  padding: 1rem;
}

.nav-link {
  color: white;
  text-decoration: none;
  margin-right: 1rem;
}

.nav-link:hover {
  text-decoration: underline;
}

设计内容区域

为主内容区域设置合适的边距和内边距。使用卡片式布局展示项目或文章，添加阴影效果提升视觉层次。

.content {
  padding: 2rem;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1rem;
  margin-bottom: 1rem;
}

添加页脚样式

为页脚设置固定高度和居中对齐。使用较浅的背景色与主要内容形成对比，确保版权信息清晰可见。

.footer {
  background-color: #f8f9fa;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

实现响应式设计

通过媒体查询调整布局和字体大小。针对移动设备优化导航栏和内容排列，确保在小屏幕上体验良好。

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

  .navbar {
    flex-direction: column;
  }
}

添加动画效果

使用CSS过渡或关键帧动画为交互元素添加细微动效。避免过度使用动画，保持页面简洁专业。

.button {
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darken(var(--primary-color), 10%);
}