css制作个人页面

设计页面布局

使用CSS Grid或Flexbox创建响应式布局。Grid适合复杂的网格结构，Flexbox适合一维排列。定义容器属性如display: grid或display: flex，再设置子项的对齐方式和间距。

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

设置颜色与字体

通过CSS变量定义主题色和字体，便于全局调整。选择易读的字体组合，如font-family: 'Segoe UI', sans-serif。使用@import导入Google Fonts等外部字体。

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

添加交互效果

利用伪类和过渡属性增强交互性。按钮悬停效果可使用:hover配合transition。滚动动画通过@keyframes实现。

.button {
  transition: transform 0.3s;
}
.button:hover {
  transform: scale(1.05);
}

优化移动端显示

使用媒体查询适配不同屏幕尺寸。调整布局列数、字体大小和边距。确保触摸目标尺寸不小于48px。

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

引入图标与装饰

通过Font Awesome或SVG添加图标。使用::before伪元素插入小装饰。CSS渐变背景提升视觉层次。

.icon::before {
  content: url('icon.svg');
  display: inline-block;
  width: 24px;
}

调试与验证

使用浏览器开发者工具检查元素盒模型和层叠上下文。通过W3C CSS验证器检查语法错误。在不同设备上测试显示效果。