简单的div+css网页模板

基础概念

div+css 是一种网页布局技术，其中 div 是 HTML 中的一个块级元素，用于创建一个容器，而 CSS（层叠样式表）则用于设置这些容器的样式和布局。这种组合使得网页设计更加灵活和可控。

优势

结构与样式分离：HTML 负责内容的结构，CSS 负责外观和布局，使得代码更加清晰和易于维护。
灵活性：CSS 提供了丰富的样式和布局选项，可以实现复杂的网页设计。
可重用性：CSS 样式可以应用于多个元素，减少了重复代码。
响应式设计：通过 CSS 媒体查询，可以轻松实现响应式网页设计，适应不同设备的屏幕尺寸。

类型

固定布局：使用固定像素值来设置元素的宽度和高度。
流式布局：使用百分比来设置元素的宽度，使其根据父容器的大小自动调整。
网格布局：使用 CSS Grid 布局模块，可以创建复杂的二维布局。
弹性布局：使用 Flexbox 布局模块，可以创建灵活的一维布局。

应用场景

企业官网：用于创建简洁、专业的网页设计。
电子商务网站：用于展示商品信息和购物车功能。
个人博客：用于创建个性化的博客页面。
响应式网站：用于创建适应不同设备的网页设计。

示例代码

以下是一个简单的 div+css 网页模板示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Div+CSS Template</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to My Website</h1>
        <p>This is a simple div+css template.</p>
    </div>
</body>
</html>