DIV+CSS常用的Html网页布局代码

封面图 • 2025-11-08 • Html/Css

在使用 **HTML + CSS** 进行网页布局时，`DIV` 是常用的容器元素，配合 `CSS` 可以实现各种布局方式。以下是一些常见的 **DIV+CSS 布局代码示例**，适用于不同的布局需求：

---

## 一、基本结构

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>网页布局示例</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

.container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

header, footer {
            background-color: #333;
            color: white;
            padding: 10px 0;
            text-align: center;
        }

nav {
            background-color: #444;
            padding: 10px;
        }

main {
            display: flex;
            flex-wrap: wrap;
        }

aside {
            width: 25%;
            background-color: #f0f0f0;
            padding: 10px;
        }

article {
            width: 75%;
            padding: 10px;
        }
    </style>
</head>
<body>

<main>
        <aside>
            <h2>侧边栏</h2>
            <p>这里是侧边栏内容。</p>
        </aside>
        <article>
            <h2>文章标题</h2>
            <p>这里是主要内容区域。</p>
        </article>
    </main>

</body>
</html>
```

---

## 二、常见布局类型

### 1. **两列布局（左侧固定宽度，右侧自适应）**

```html
<style>
    .left {
        width: 200px;
        float: left;
        background: #eee;
    }

.right {
        margin-left: 200px;
        background: #fff;
    }
</style>

<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
```

---

### 2. **三列布局（左右固定，中间自适应）**

```html
<style>
    .left {
        width: 200px;
        float: left;
        background: #eee;
    }

.center {
        margin: 0 200px;
        background: #fff;
    }

.right {
        width: 200px;
        float: right;
        background: #eee;
    }
</style>

<div class="left">左栏</div>
<div class="center">中间内容</div>
<div class="right">右栏</div>
```

---

### 3. **Flexbox 布局（现代推荐）**

```html
<style>
    .flex-container {
        display: flex;
        justify-content: space-between;
    }

.flex-item {
        flex: 1;
        padding: 10px;
        border: 1px solid #ccc;
    }
</style>

<div class="flex-container">
    <div class="flex-item">左侧</div>
    <div class="flex-item">中间</div>
    <div class="flex-item">右侧</div>
</div>
```

---

### 4. **Grid 布局（适合复杂页面）**

```html
<style>
    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
    }

.grid-item {
        background: #f0f0f0;
        padding: 10px;
    }
</style>

<div class="grid-container">
    <div class="grid-item">项目 1</div>
    <div class="grid-item">项目 2</div>
    <div class="grid-item">项目 3</div>
    <div class="grid-item">项目 4</div>
</div>
```

---

## 三、常用 CSS 属性说明

| 属性 | 说明 |
|------|------|
| `display: flex` | 启用 Flexbox 布局 |
| `display: grid` | 启用 Grid 布局 |
| `float` | 浮动布局（传统方法） |
| `position: absolute` | 绝对定位 |
| `margin`, `padding` | 控制间距 |
| `width`, `height` | 控制大小 |
| `background-color` | 设置背景色 |

---

## 四、注意事项

- 使用 `display: flex` 或 `display: grid` 更加现代、灵活。
- 避免过多嵌套的 `div`，保持结构清晰。
- 使用 `flex-wrap: wrap` 实现响应式布局。
- 响应式设计可结合媒体查询 `@media`。

---

如需特定布局（如顶部导航栏、底部固定栏、响应式布局等），可以告诉我具体需求，我可以为你提供更详细的代码示例。

DIV+CSS常用的Html网页布局代码