css三列布局 中间为背景

CSS三列布局是网页设计中常用的一种布局方式，它适用于多种网站设计风格。三列布局通常包括左、中、右三个列，在三者中间的中心列可以设置背景图案或颜色。
下面是一个简单的CSS三列布局代码示例：

<style>
/* 设置三列的样式 */
#left {
    float: left;
    width: 25%;
    background-color: #ccc;
}
#middle {
    float: left;
    width: 50%;
    background-image: url(bg.jpg);
    background-repeat: repeat-y;
    background-position: center;
}
#right {
    float: right;
    width: 25%;
    background-color: #ccc;
}
/* 清除浮动 */
.clear {
    clear: both;
}
</style>

<div id="left">
    <p>这里是左侧列</p>
</div>
<div id="middle">
    <p>这里是中心列，背景为图案或颜色</p>
</div>
<div id="right">
    <p>这里是右侧列</p>
</div>
<div class="clear"></div> 

在上面的代码中，我们设置了三个列的样式，`float`属性使得三列都浮动在页面左侧或右侧，并使用`width`属性设置它们的宽度。左右两列使用纯色背景，中心列使用了背景图案。为了使三列都能够正常显示，我们使用了一个清除浮动的样式。
在实际开发中，我们可以根据需求调整三列的宽度、背景图案或颜色、文本样式等。这种三列布局方式简单易用，适用于大多数网站的布局需求。