css制作个人网站

设计网站布局

使用CSS的Flexbox或Grid布局系统来创建响应式设计。Flexbox适合一维布局，Grid适合二维布局。通过媒体查询适配不同屏幕尺寸。

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

设置颜色和字体

定义CSS变量便于统一管理主题色和字体。使用Google Fonts或系统字体栈增强可读性。

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

创建导航菜单

使用CSS实现水平或垂直导航栏。添加悬停效果和活动状态指示器提升用户体验。

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

设计内容区域

为不同内容区块设置间距和边框。使用CSS伪元素添加装饰性元素。

.content-section {
  padding: 2rem;
  border-bottom: 1px solid #eee;
}
.content-section::before {
  content: "✦";
  color: var(--primary-color);
}

添加交互效果

实现平滑滚动、动画和过渡效果。注意性能优化避免过度使用特效。

.button {
  transition: all 0.3s ease;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

优化移动端体验

确保触摸目标大小合适，禁用用户缩放防止意外行为。使用视口单位适应不同设备。

@media (hover: none) {
  .button {
    min-width: 44px;
    min-height: 44px;
  }
}

实现暗黑模式

通过CSS变量和媒体查询自动切换主题。提供手动切换按钮增强可控性。

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #f5f5f5;
  }
}

性能优化技巧

压缩CSS文件，使用will-change属性提示浏览器优化渲染。避免过度复杂的选器。

.optimized {
  will-change: transform;
  image-rendering: optimizeQuality;
}