div css中文html模板

基础概念

div 是 HTML 中的一个通用容器元素，用于对网页内容进行分组和布局。CSS（层叠样式表）则用于描述 HTML 或 XML 文档的呈现方式。结合 div 和 CSS，可以创建出丰富多样的网页布局和样式。

类型

固定布局：使用像素值定义 div 的宽度、高度和位置。
流式布局：使用百分比定义 div 的宽度，使其能够根据浏览器窗口大小自动调整。
网格布局：通过 CSS Grid 实现复杂的二维布局。
弹性布局：通过 Flexbox 实现灵活的一维布局。

应用场景

网页布局：如头部、导航栏、侧边栏、内容区域和页脚等部分的布局。
组件封装：将常用的 UI 组件（如按钮、表单、列表等）封装成独立的 div 元素，并通过 CSS 定义其样式。
动画效果：结合 CSS 动画和过渡效果，为网页元素添加动态效果。

示例代码

以下是一个简单的 HTML 和 CSS 结合的示例，展示了一个基本的网页布局：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }
        .nav {
            float: left;
            width: 20%;
            height: 400px;
            background-color: #ddd;
        }
        .content {
            float: left;
            width: 80%;
            height: 400px;
            background-color: #fff;
        }
        .footer {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>网站标题</h1>
    </div>
    <div class="nav">
        <h2>导航</h2>
        <!-- 导航链接 -->
    </div>
    <div class="content">
        <h2>内容区域</h2>
        <!-- 主要内容 -->
    </div>
    <div class="footer">
        <p>版权所有 &copy; 2023</p>
    </div>
</body>
</html>