[分享]css分为四个平均的块

 CSS是可层叠样式表（Cascading Style Sheets）的缩写，用于定义网页的样式。在一个网站中，样式通常被分为四个部分，即布局、颜色、字体和效果。 / layout / .header...

 CSS是可层叠样式表（Cascading Style Sheets）的缩写，用于定义网页的样式。在一个网站中，样式通常被分为四个部分，即布局、颜色、字体和效果。

/* layout */
.header {
  width: 100%;
  height: 80px;
  background-color: #333;
}

.sidebar {
  width: 20%;
  float: left;
}

.content {
  width: 80%;
  float: right;
}

.footer {
  width: 100%;
  height: 50px;
  background-color: #333;
}

/* color */
body {
  color: #333;
  background-color: #f2f2f2;
}

/* font */
h1, h2, h3 {
  font-family: 'Open Sans', sans-serif;
}

p {
  font-family: 'Roboto', sans-serif;
}

/* effects */
a:hover {
  color: #ff9900;
  text-decoration: none;
}

button {
  background-color: #ff9900;
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #999;
} 

在此示例中，我们可以看到CSS代码相当简单。布局部分定义了网站的主体结构，包括页眉，页脚，侧边栏和内容。颜色部分指定了页面的文字和背景颜色。字体部分使用了两种不同的字体，一个用于标题，一个用于正文。最后，效果部分定义了当用户与链接和按钮交互时要应用的效果。

使用这种分层方式，您可以轻松地将CSS代码组织和维护。任何时候，当您需要删除、更改或添加某个站点元素的样式时，只需找到它的位置并进行修改即可，而无需查找整个样式表。此外，分层方式也使得共享样式和模块化更加容易。