css怎么制作页面

CSS 制作页面的基本方法

布局与结构 使用 display 属性控制元素布局方式，例如 flex 或 grid。Flexbox 适合一维布局，Grid 适合二维复杂布局。通过 margin 和 padding 调整元素间距。

样式设计 通过 color 和 background-color 设置颜色，font-family 和 font-size 调整字体。使用 border 和 border-radius 添加边框和圆角效果。

响应式设计 通过媒体查询 @media 适配不同屏幕尺寸。设置断点（如 max-width: 768px）调整布局或隐藏元素。

动画与交互 使用 transition 添加平滑过渡效果，或通过 @keyframes 创建复杂动画。hover 伪类实现悬停交互效果。

代码示例

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

.button {
  background-color: #3498db;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #2980b9;
}

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