在CSS中分配多个部门(DIV)并链接到HTML [已关闭]

在CSS中分配多个部门（DIV）并链接到HTML是一个常见的网页布局任务。下面是一个基本的示例，展示如何创建多个DIV元素，并使用CSS进行样式设置，以及如何在HTML中链接这些样式。

HTML部分

首先，创建一个HTML文件，定义几个DIV元素，并为它们添加类名以便在CSS中引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS DIV Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="box box1">Box 1</div>
        <div class="box box2">Box 2</div>
        <div class="box box3">Box 3</div>
    </div>
</body>
</html>

CSS部分

接下来，创建一个名为styles.css的CSS文件，并定义这些DIV的样式。

/* 基础样式 */
body {
    font-family: Arial, sans-serif;
}

.container {
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 子元素之间均匀分布 */
    padding: 20px;
}

.box {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px; /* 垂直居中文本 */
}

/* 特定样式 */
.box1 {
    background-color: #FF5733;
}

.box2 {
    background-color: #33FF57;
}

.box3 {
    background-color: #3357FF;
}

解释

HTML结构：在HTML中，我们创建了一个包含三个DIV元素的container DIV。每个子DIV都有一个共同的类名box，以及一个独特的类名（box1、box2、box3），以便在CSS中分别设置样式。
CSS样式：
- .container类使用Flexbox布局，使得子元素（即三个DIV）在水平方向上均匀分布。
- .box类定义了所有DIV的共同样式，如宽度、高度、文本居中等。
- .box1、.box2、.box3类分别定义了每个DIV的独特背景颜色。