css如何在两个960.gs框之间添加垂直线？

1. 使用960.gs框架布局

960.gs是一个流行的CSS框架，用于创建网站的栅格布局。在使用960.gs框架时，可以轻松地将页面分为多个列，并通过CSS设置宽度和间距。要在两个960.gs框之间添加垂直线，我们可以借助CSS伪元素来实现。

1.1 了解960.gs框架

960.gs框架基于栅格布局的思想，将页面划分为12列，每一列具有相等的宽度。通过设置类名为<div class="grid_<列数>">的元素，可以轻松地将内容放置在所需的列中。下面是一个示例：

<div class="container_12">
    <div class="grid_6">
        <p>左侧内容</p>
    </div>
    <div class="grid_6">
        <p>右侧内容</p>
    </div>
</div>

在这个示例中，我们将页面分为两列，每列占用了网格的一半。现在，让我们看看如何在这两列之间添加垂直线。

1.2 使用CSS伪元素添加垂直线

CSS伪元素是CSS增强功能，允许在元素的内容之前或之后插入样式化的内容。通过使用伪元素，我们可以在两个960.gs框之间添加垂直线。下面是一种常用的方法：

.container_12:before,
.container_12:after {
    content: "";
    display: table;
}
.container_12:after {
    clear: both;
}
.grid_6 {
    width: 50%;
    float: left;
    position: relative;
    overflow: hidden;
}
.grid_6:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #000;
}

首先，我们使用伪元素:before和:after创建一个看不见的辅助元素，以清除浮动并确保容器的高度正确计算。然后，我们将.grid_6元素的宽度设置为50%以实现两列布局。为了在两列之间添加垂直线，我们给.grid_6元素的:before伪元素设置了绝对定位，并设置了宽度和背景颜色。

2. 完整示例代码

下面是一个完整的示例代码，演示如何在两个960.gs框之间添加垂直线：

.container_12:before,
.container_12:after {
    content: "";
    display: table;
}
.container_12:after {
    clear: both;
}
.grid_6 {
    width: 50%;
    float: left;
    position: relative;
    overflow: hidden;
}
.grid_6:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #000;
}

在上面的代码中，我们使用了.container_12类作为容器元素，并使用.grid_6类作为列元素。您可以根据需要调整容器和列的类名和样式。

3. 总结

通过使用960.gs框架和CSS伪元素，我们可以在两个960.gs框之间添加垂直线。使用伪元素可以让我们在不添加额外HTML元素的情况下实现这一效果。希望本文对您理解如何在960.gs布局中添加垂直线有所帮助。