css制作网页组件

CSS 制作网页组件的方法

使用 Flexbox 布局
Flexbox 适合创建灵活的组件布局，例如导航栏或卡片。通过 display: flex 定义容器，结合 justify-content 和 align-items 控制子元素的对齐方式。

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #ddd;
}

利用 Grid 布局
Grid 适合复杂网格结构的组件，如仪表盘或图片画廊。通过 display: grid 定义网格，使用 grid-template-columns 划分列。

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

自定义变量维护一致性
通过 CSS 变量（--*）定义主题色、间距等，便于全局调整。

:root {
  --primary-color: #3498db;
  --spacing: 1rem;
}
.button {
  background: var(--primary-color);
  padding: var(--spacing);
}

伪元素增强视觉效果
使用 ::before 和 ::after 添加装饰性元素，如下划线或图标。

.tooltip::after {
  content: "提示文本";
  position: absolute;
  background: #333;
  color: white;
  padding: 0.5rem;
}

媒体查询实现响应式
通过 @media 针对不同屏幕尺寸调整组件样式。

.navbar {
  flex-direction: row;
}
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
  }
}

过渡与动画提升交互
使用 transition 和 @keyframes 为悬停或点击添加动态效果。

.button {
  transition: background 0.3s;
}
.button:hover {
  background: #2980b9;
}

BEM 命名规范
采用 Block-Element-Modifier（BEM）命名法提高可维护性。

.menu__item--active {
  color: var(--primary-color);
}

示例：按钮组件
结合上述技术创建一个可复用的按钮。

.button {
  --bg-color: #3498db;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--bg-color);
  color: white;
  border: none;
  border-radius: 4px;
  transition: opacity 0.2s;
}
.button:hover {
  opacity: 0.9;
}