css div制作

使用CSS创建div元素

在HTML中，div元素是最常用的容器，用于组织和布局页面内容。通过CSS可以对其进行样式设置。

HTML基础结构

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

CSS样式设置

.container {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 20px;
}

常见div样式属性

尺寸和位置

div {
  width: 300px;  /* 宽度 */
  height: 200px; /* 高度 */
  position: relative; /* 定位方式 */
  top: 10px;     /* 上偏移 */
  left: 20px;    /* 左偏移 */
}

边框和背景

div {
  background-color: #ffffff; /* 背景色 */
  background-image: url('image.jpg'); /* 背景图 */
  border: 2px solid #000000; /* 边框 */
  border-radius: 5px; /* 圆角 */
}

布局和间距

div {
  display: block; /* 显示方式 */
  margin: 10px;   /* 外边距 */
  padding: 15px;  /* 内边距 */
  box-sizing: border-box; /* 盒模型 */
}

响应式div设计

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

@media (max-width: 768px) {
  .responsive-div {
    width: 100%;
    margin: 0;
    padding: 5px;
  }
}

高级div效果

阴影效果

div {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

渐变背景

div {
  background: linear-gradient(to right, #ff9966, #ff5e62);
}

动画效果

div {
  transition: all 0.3s ease;
}
div:hover {
  transform: scale(1.05);
}

实用布局技巧

垂直居中内容

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

创建等宽列

.column-container {
  display: flex;
}
.column {
  flex: 1;
  margin: 0 10px;
}

固定页脚

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex: 1;
}
.footer {
  height: 60px;
}