css制作静态页面

CSS 制作静态页面的方法

布局与结构 使用 display: flex 或 display: grid 实现响应式布局。Flexbox 适合一维布局（行或列），Grid 适合二维复杂布局。通过 margin 和 padding 控制元素间距，box-sizing: border-box 确保尺寸计算包含边框和内边距。

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

样式设计 通过 color 和 background 设置颜色，font-family 和 font-size 调整字体。使用伪类（如 :hover）添加交互效果。阴影效果用 box-shadow，圆角用 border-radius。

.button {
  background: #3498db;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.button:hover {
  opacity: 0.8;
}

媒体查询适配多设备 通过 @media 针对不同屏幕尺寸调整样式，确保移动端友好。典型断点包括 768px（平板）和 480px（手机）。

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

性能优化 压缩 CSS 文件，减少 HTTP 请求。使用 CSS 精灵图合并小图标，避免过多 @import。选择器尽量简洁，避免深层嵌套。

/* 避免 */
div.container > ul > li a { ... }
/* 推荐 */
.menu-link { ... }

工具与资源

• 预处理器：Sass/Less 增强 CSS 可维护性。
• 框架：Bootstrap/TailwindCSS 快速构建页面。
• 调试工具：浏览器开发者工具检查元素和样式。

通过以上方法，可以高效创建美观、响应式的静态页面。