div css制作

使用 DIV 和 CSS 制作网页布局

DIV 是 HTML 中的块级元素，结合 CSS 可以灵活地创建各种网页布局。以下是常见的使用方法：

基础 DIV 结构

<div class="container">
  <div class="header">页眉</div>
  <div class="content">主要内容</div>
  <div class="footer">页脚</div>
</div>

基本样式控制

.container {
  width: 80%;
  margin: 0 auto;
  background-color: #f5f5f5;
}

.header {
  height: 100px;
  background-color: #333;
  color: white;
}

.content {
  min-height: 400px;
  padding: 20px;
}

.footer {
  height: 50px;
  background-color: #333;
  color: white;
  text-align: center;
}

常见布局实现

两栏布局

<div class="two-column">
  <div class="left">左侧栏</div>
  <div class="right">主内容区</div>
</div>

.two-column {
  display: flex;
}

.left {
  width: 200px;
  background: #eee;
}

.right {
  flex: 1;
  padding: 15px;
}

三栏布局

<div class="three-column">
  <div class="left">左侧</div>
  <div class="middle">中间</div>
  <div class="right">右侧</div>
</div>

.three-column {
  display: flex;
}

.left, .right {
  width: 150px;
  background: #ddd;
}

.middle {
  flex: 1;
  padding: 10px;
}

响应式设计

/* 移动设备优先 */
.container {
  width: 100%;
}

/* 平板设备 */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* 桌面设备 */
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

常用 CSS 属性

• display: 控制元素显示方式（block, inline, flex, grid等）
• position: 定位方式（static, relative, absolute, fixed）
• float: 浮动布局（left, right, none）
• margin/padding: 外边距和内边距
• width/height: 尺寸控制
• background: 背景设置
• border: 边框样式

现代布局技术

Flexbox 布局

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

CSS Grid 布局

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

最佳实践

1. 使用语义化的类名和ID
2. 保持CSS选择器简洁
3. 合理使用CSS预处理器（如Sass/Less）
4. 遵循移动优先的设计原则
5. 注意浏览器兼容性
6. 使用CSS重置或标准化样式表

通过合理组合DIV和CSS，可以创建从简单到复杂的各种网页布局，同时保持代码的可维护性和扩展性。