当前位置：首页 > CSS

使用css制作div

2026-02-13 10:48:42CSS

创建基本的 HTML 结构

在 HTML 文件中定义一个 <div> 元素，并为其添加一个类名或 ID 以便通过 CSS 进行样式控制。

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

使用 CSS 设置样式

通过 CSS 为 <div> 设置宽度、高度、背景颜色、边框等基本样式。

.example-div {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 20px;
  text-align: center;
  line-height: 100px;
}

调整布局和定位

使用 display、position 等属性控制 <div> 的布局方式。

.example-div {
  display: block; /* 默认值，可设置为 inline-block 或 flex */
  position: relative; /* 可调整为 absolute 或 fixed */
  top: 0;
  left: 0;
}

添加交互效果

通过 :hover 伪类或其他 CSS 动画增强交互体验。

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

响应式设计

使用媒体查询确保 <div> 在不同设备上显示正常。

@media (max-width: 600px) {
  .example-div {
    width: 100%;
    margin: 10px 0;
  }
}

代码整合示例

将 HTML 和 CSS 结合为一个完整示例。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Div 示例</title>
  <style>
    .example-div {
      width: 200px;
      height: 100px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      padding: 10px;
      margin: 20px;
      text-align: center;
      line-height: 100px;
    }
    .example-div:hover {
      background-color: #e0e0e0;
      transform: scale(1.05);
      transition: all 0.3s ease;
    }
    @media (max-width: 600px) {
      .example-div {
        width: 100%;
        margin: 10px 0;
      }
    }
  </style>
</head>
<body>
  <div class="example-div">这是一个 div 元素</div>
</body>
</html>

使用css制作div