制作页面css

CSS 页面布局基础

使用 display: flex 或 display: grid 创建灵活的页面结构。Flexbox 适合一维布局（行或列），Grid 适合二维布局（行列组合）。设置 width: 100% 和 max-width 控制页面宽度。

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

响应式设计实现

通过媒体查询适配不同设备屏幕。设置断点（如 768px）调整布局、字体大小或隐藏元素。使用相对单位（vw, %, rem）替代固定像素值。

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
  .main-content {
    grid-column: 1 / -1;
  }
}

字体与排版控制

选择 web-safe 字体或通过 @font-face 引入自定义字体。设置 line-height 改善可读性，使用 text-align 调整对齐方式。rem 单位基于根元素字体大小，适合缩放。

body {
  font-family: 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  font-size: 1rem;
}

颜色与视觉效果

使用 CSS 变量（--primary-color）统一主题色。rgba() 设置透明度，box-shadow 添加投影。渐变背景通过 linear-gradient() 实现。

:root {
  --primary-color: #3498db;
}
.button {
  background: linear-gradient(to right, var(--primary-color), #2ecc71);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

交互元素样式

为链接和按钮添加 :hover 和 :active 状态。过渡效果使用 transition，动画用 @keyframes。禁用文本选择通过 user-select: none。

.button {
  transition: transform 0.3s ease;
}
.button:hover {
  transform: translateY(-2px);
}

浏览器兼容性处理

使用前缀确保特性兼容（如 -webkit-）。检测旧浏览器支持情况，必要时提供回退方案。Modernizr 工具可帮助检测功能支持。

.element {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}