css制作div

创建基本 div 结构

在 HTML 文件中添加一个 div 元素，并为其指定一个类名或 ID 以便于 CSS 选择器定位：

<div class="example-div">这是一个 div 元素</div>

设置 div 样式

通过 CSS 为 div 添加基础样式，包括宽度、高度、背景色等：

.example-div {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

控制 div 布局

使用 CSS 布局属性调整 div 的位置和排列方式：

.example-div {
  margin: 10px auto; /* 水平居中 */
  padding: 15px;
  display: block; /* 默认值，可改为 flex/inline-block 等 */
}

添加交互效果

通过伪类和过渡效果增强交互性：

.example-div:hover {
  background-color: #e0e0e0;
  transform: scale(1.05);
  transition: all 0.3s ease;
}

响应式设计

使用媒体查询使 div 适应不同屏幕尺寸：

@media (max-width: 600px) {
  .example-div {
    width: 90%;
    height: auto;
  }
}

进阶样式示例

组合使用阴影、圆角等现代 CSS 特性：

.example-div {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-radius: 8px;
  font-family: 'Arial', sans-serif;
  text-align: center;
  line-height: 100px;
}