css上下两条分割线

CSS是网页设计中不可或缺的一部分，它可以实现网页的各种效果，今天我们来学习一下如何实现上下两条分割线。

首先，在HTML文件中添加以下代码：

<div class="container">
    <h1>标题</h1>
    <p>内容</p>
</div> 

接下来，我们需要使用CSS来实现分割线的效果。先为容器添加样式：

.container {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
} 

这段代码中，我们为容器的顶部和底部分别添加了1像素粗的灰色实线。现在再为标题和内容分别添加样式：

h1 {
    margin: 0;
    padding: 20px;
    background-color: #f7f7f7;
}

p {
    margin: 0;
    padding: 20px;
    background-color: #eee;
} 

这段代码中，我们为标题和内容分别添加了20像素的内边距和背景色。注意，这里的margin要设置为0，否则会有额外的空白间距。

以上代码加起来就可以实现上下两条分割线的效果了。你也可以根据需要自行调整颜色、粗细和样式。