css怎么制作个人主页

制作个人主页的CSS方法

布局设计
使用Flexbox或Grid布局创建响应式结构。Flexbox适合一维布局，Grid适合复杂二维布局。设置display: flex或display: grid定义容器，通过justify-content和align-items控制对齐方式。

配色与字体
选择主色调和辅助色，通过CSS变量统一管理：

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}
body {
  font-family: 'Arial', sans-serif;
  color: #333;
}

导航栏样式
固定顶部导航栏并添加交互效果：

nav {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: var(--primary-color);
}
nav a:hover {
  background-color: var(--secondary-color);
  transition: 0.3s;
}

内容区域设计
使用卡片式布局展示个人项目或经历：

.card {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 20px;
  margin: 10px;
}

响应式处理
通过媒体查询适配不同设备：

@media (max-width: 768px) {
  nav {
    flex-direction: column;
  }
  .card {
    width: 100%;
  }
}

动画效果
添加微交互提升用户体验：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.intro {
  animation: fadeIn 1s ease-in;
}

页脚设计
保持简洁并固定底部位置：

footer {
  background-color: #f8f9fa;
  text-align: center;
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
}