html - 构建 repeat-x header

Question

我有一些布局 CSS 问题。他们更像是最佳实践以及构建它的最有效方法是什么。让我从我要实现的目标的图表开始。

这个标题菜单背景是流动的，里面的按钮是固定的。所以它实际上是由一个独立于灰色风格背景的左按钮组成的。然后是灰色风格背景中的 3 个或更多按钮，然后是一些图标和一个搜索字段，所有这些都在灰色背景中。我的主要问题是如何实现灰色背景扩展到浏览器宽度 100% 并且两端仍然有 2 个圆 Angular 。

这是一个伪html结构

<div id="menuHeader">
<ul>
    <li class=""><a href="#">home</a></li>
    <li class=""><a href="#">button1</a></li>
    <li class=""><a href="#">button2</a></li>
    <li class=""><a href="#">button3</a></li>
    <li class="tools">
      <div class="icon">icon1</div>
      <div class="icon">icon2</div>
      <div class="icon">icon3</div>
      <div class="search"></div>
    </li>
</ul>

现在是 css 问题，我应该把我的重复背景放在哪里。如果我将它作为背景图像放在 menuHeader 上，那么它将是一个没有左右 Angular 的长重复背景图形。我需要为左右和中心设置一个 div 吗？然后把我的灰色按钮放在里面，把我的蓝色主页按钮放在那个中心 div 的左边，放在左边的 div 的左边。或者有没有办法做到这一点，我可以使用我现在拥有的现有标签，而不必处理额外的空 div 标记。

很抱歉，如果我不是很清楚，但我认为主要问题很清楚，如何让背景图形具有圆 Angular 和重复背景。然后能够将我的按钮添加为背景图形。

更新:不幸的是，这不会是 html5

Answer 1

#menuHeader {
  position: relative;
  width: 100%;
  background: url("bg.png") repeat;/*An image which has a width of 1px is sufficient*/
}
#leftSide, #rightSide{
  position: absolute;
  top: 0;
  width: 20px;/*Whatever width*/
  height: 40px;/*Whatever height*/
}
#leftside{
  background: url("left.png") transparent;
}
#rightside{
  background: url("right.png") transparent;
}

在 div#menuHeader 中添加此 HTML:

<div id="menuHeader">
  <div id="leftside"></div><div id="rightside"></div><!--This location is chosen, so that the automatic z-indexing causes the background to stay at the background-->
  ....
</div>

创建两个图像(或一个，以减少服务器负载，并使用 background-position )。如果要添加该蓝色框，请展开左侧背景图像。确保 div#menuHeader 中的元素具有透明背景或没有背景。