第二周博客：CSS进阶

在CSS中，我们可以使用不同的技术来进行布局和样式设计。以下是一些进阶技术的示例：

1. 使用Flexbox进行布局：

.container {
  display: flex; /* 设置为Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

2. 使用Grid布局创建复杂的网格结构：

.container {
  display: grid; /* 设置为Grid布局 */
  grid-template-columns: repeat(3, 1fr); /* 创建三个等宽的列 */
  grid-template-rows: repeat(3, 1fr); /* 创建三个等高的行 */
  gap: 10px; /* 设置网格间隙 */
}

3. 使用伪元素添加装饰性元素：

.element::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-color: blue;
}

4. 使用CSS过渡和动画制作生动的动态效果：

.element:hover {
  transform: scale(1.1); /* 鼠标悬停时放大元素 */
  transition: transform 0.3s ease-in-out; /* 设置过渡动画 */
}

5. 使用Media Queries进行响应式设计：

@media (max-width: 768px) {
  .container {
    flex-direction: column; /* 在小屏幕上将Flex项目垂直排列 */
  }
}

6. 使用CSS变量（也称为CSS自定义属性）实现主题切换：

:root {
  --primary-color: blue; /* 定义主题色 */
}
 
.element {
  color: var(--primary-color); /* 使用主题色 */
}

这些CSS进阶技术可以帮助开发者更高效地创建网页布局和样式，提升用户体验。