我正在开发如下图所示的导航。
整个导航是浏览器窗口的宽度,但项目以设计为中心。
我已经有一段时间没有使用任何代码了,并且很难将它们组合在一起。我应该使用身体图像水平重复然后将我的列表放置在需要的位置吗?或者我应该使用 div 来跨越浏览器窗口的整个宽度并将列表元素定位在它们需要的位置吗?
谢谢
我正在开发如下图所示的导航。
整个导航是浏览器窗口的宽度,但项目以设计为中心。
我已经有一段时间没有使用任何代码了,并且很难将它们组合在一起。我应该使用身体图像水平重复然后将我的列表放置在需要的位置吗?或者我应该使用 div 来跨越浏览器窗口的整个宽度并将列表元素定位在它们需要的位置吗?
谢谢
我会使用具有简单背景颜色的容器并将菜单定位在其中。
我会为你举一个简单的例子。
更新
这是我刚刚放在一起的一个简单示例:http: //jsfiddle.net/aQTRF/
或者,如果您需要黑色菜单栏延伸到导航容器之外,则可能更容易将栏添加为重复主体背景的一部分(如您所述),然后将导航定位在顶部。这也将允许您在主要内容区域内的菜单栏与外部相比略有不同。
我建议尽可能在图像上使用 HTML 和 CSS。它将使页面加载速度更快。
像这样简单又漂亮的东西怎么样?
使用无序列表
<ul id="nav">
<li>Nav Item</li>
<li>Nav Item</li>
<li>Nav Item</li>
</ul>
将您的样式添加到#nav 作为背景