2025-02-15 03:17:44

一个简单的CSS样式布局

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
}

main {
    padding: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
}
 

在上述代码中，我们使用 CSS 选择器来选择不同的 HTML 元素，并为它们定义了一些样式。例如，我们将整个网页的字体设置为 Arial，将边距和内边距设置为 0。然后，我们为 header 、 main 和 footer 元素分别定义了背景颜色、文本颜色和内边距。

你可以将上述代码复制到 CSS 文件中，并在 HTML 文件中引用该 CSS 文件，以应用这些样式。例如：

 



    
这是标题
这是主要内容
 

这样，你就可以看到一个简单的 CSS 布局效果了。你可以根据自己的需求修改 CSS 文件中的样式定义，以满足不同的布局需求。

在上述代码中，我们使用 CSS 选择器来选择不同的 HTML 元素，并为它们定义了一些样式。例如，我们将整个网页的字体设置为 Arial，将边距和内边距设置为 0。然后，我们为 header 、 main 和 footer 元素分别定义了背景颜色、文本颜色和内边距。

你可以将上述代码复制到 CSS 文件中，并在 HTML 文件中引用该 CSS 文件，以应用这些样式。例如：

这样，你就可以看到一个简单的 CSS 布局效果了。你可以根据自己的需求修改 CSS 文件中的样式定义，以满足不同的布局需求。