如果您单击此处:http ://www.ideagasms.net/index2 ,您会看到导航菜单围绕横幅图像,就像一个框架。它是使用三个 div 以这种方式组合在一起的,其中两个是 css 旋转 90 度,绝对位置。当然,一旦您调整窗口大小,导航菜单就会中断。
必须有更好的方法来构建类似框架的菜单。一些建议或示例,我只需要有关如何构建这样的东西的想法。也许一个 jquery 解决方案或其他东西可以解决问题。
position: relative;
用(但没有任何属性)标记它们的父元素top/left/bottom/right
,这样旋转的导航元素将定位在它们的父元素而不是窗口中。
但是,我认为您的导航概念很新颖,但从可用性的角度来看很糟糕(并且在视觉上也没有吸引力),因为人们无法轻松阅读旋转的英文文本。
您可以将#nav-left
和#nav-right
位置更改为绝对,然后将它们居中left: 50%
(就像您对 所做的那样),并使用边距更正它们的位置,#headerwrapper
例如margin: 0 auto 20px 122px
.#nav-right