[分享]css两边菜单中间图片

CSS中的两边菜单中间图片常用于网页布局。它是指一副画面将页面分为左、中、右三部分，中间部分是图片或内容区，两侧各是一列菜单。这个设计特别适用于网站的门户页面、产品介绍页等需要有重点展示内容的页面上。...

CSS中的两边菜单中间图片常用于网页布局。它是指一副画面将页面分为左、中、右三部分，中间部分是图片或内容区，两侧各是一列菜单。这个设计特别适用于网站的门户页面、产品介绍页等需要有重点展示内容的页面上。

.left-menu{
  float: left;
  width: 200px;
  height: 400px;
  background-color: #ccc;
}
.right-menu{
  float: right;
  width: 200px;
  height: 400px;
  background-color: #ccc;
}
.middle-section{
  margin: 0 200px;
  height: 400px;
  background-image: url(image.jpg);
  background-repeat: no-repeat;
  background-position: center center;
} 

以上是一个简单的CSS代码示例，其中left-menu和right-menu样式用于定义两侧菜单区域的样式，中间的画面则定义在middle-section样式里。我们可以通过margin属性控制中间画面距离两侧菜单的间隔。

这种布局方式还可以进行进一步扩展。比如在两侧菜单里加上嵌套的子菜单、搜索框等功能性元素，或者在中间的图片区域里加入动画效果等。同时，我们也可以通过CSS3的新特性，如flexbox和grid，来更加灵活地控制页面布局，达到更好的用户体验。