css div制作

使用CSS制作div的基础方法

通过CSS可以控制div的样式、布局和交互效果。以下是一些常见的div制作方法：

设置div的尺寸和颜色

div {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
}

添加边框和圆角

div {
  border: 1px solid #ccc;
  border-radius: 5px;
}

div的布局控制

使用flexbox布局

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用grid布局

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

div的交互效果

添加悬停效果

div:hover {
  background-color: #e0e0e0;
  transform: scale(1.05);
}

添加过渡动画

div {
  transition: all 0.3s ease;
}

响应式div设计

媒体查询调整div样式

@media (max-width: 768px) {
  div {
    width: 100%;
    margin-bottom: 10px;
  }
}

使用视口单位

div {
  width: 50vw;
  height: 20vh;
}

高级div样式技巧

创建圆形div

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

添加阴影效果

div {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

使用伪元素装饰div

div::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: red;
}