当前位置：首页 > CSS

div css制作

2026-01-27 23:58:50CSS

使用DIV和CSS制作网页布局

DIV是HTML中的块级元素，结合CSS可以实现灵活的网页布局。以下是常见的DIV+CSS布局方法和技巧：

基础结构

div css制作

<div class="container">
  <div class="header">页眉</div>
  <div class="content">
    <div class="sidebar">侧边栏</div>
    <div class="main">主要内容</div>
  </div>
  <div class="footer">页脚</div>
</div>

常用CSS布局技术

/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 容器样式 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 浮动布局 */
.header {
  height: 80px;
  background: #333;
  color: white;
}

.sidebar {
  float: left;
  width: 25%;
  background: #f1f1f1;
}

.main {
  float: right;
  width: 75%;
}

/* 清除浮动 */
.content:after {
  content: "";
  display: table;
  clear: both;
}

/* 弹性盒布局 */
.content {
  display: flex;
}

.sidebar {
  flex: 1;
}

.main {
  flex: 3;
}

/* 网格布局 */
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 1fr 3fr;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

响应式设计技巧

div css制作

/* 媒体查询 */
@media (max-width: 768px) {
  .sidebar, .main {
    float: none;
    width: 100%;
  }

  .content {
    flex-direction: column;
  }

  .container {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

常用样式属性

div {
  /* 盒模型 */
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 1px solid #ccc;

  /* 背景 */
  background-color: #f5f5f5;
  background-image: url('image.jpg');

  /* 文本 */
  color: #333;
  font-size: 16px;
  text-align: center;

  /* 定位 */
  position: relative;
  top: 10px;
  left: 10px;

  /* 其他 */
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  opacity: 0.9;
  transition: all 0.3s ease;
}

实用技巧