0

我一直在尝试创建一个位于旋转横幅上的导航和徽标 div。我在使用 CSS 时遇到问题。

例如:

<div class="logo-div">

<div class="logo">
<img src="image/logo.jpg">
</div>

<div class="nav">
<ul><li>nav-button</li></ul>
</div>

</div><!--logo div -->

<div class="rotator">
</div>

我尝试了负上边距将旋转器拉到导航徽标 div 中,但这只会带来导航而不是徽标。我还尝试切换导航徽标和旋转器的顺序,但这也不起作用。

猜想我需要使用 z-index 以及相对和绝对定位,但我无法让它正常工作。

非常感谢。

以下是具有此功能的网站示例:网站

4

1 回答 1

0

好的,如果您的示例链接正确表明您想要什么...关键问题是您将使用什么方法来旋转横幅?当然是javascript(如果你想要跨浏览器兼容性)但是......什么方法?您提供的链接中的那个人正在使用一个里面<ul>有几个<li>' 的元素,每个元素都有不同的背景之一......

使用transitions(高级 css3 效果),absolute positioning并且left,他基本上水平滚动它们,改变值left

在任何情况下,您都需要类似的东西:

.wrapper {display:block; position:relative;}
.logo-div {position:absolute; top:0; left:0; z-index:9999;}
.logo {}
.nav {}
.rotator {position:absolute; top:0; left:0; z-index:1;}

和 html 应该是这样的:

<div class="wrapper">

  <div class="rotator">
      insert your magic slides of different content or backgrounds here, be in in ul+li format or just divs or whichever method you prefer
  </div><!-- .rotator -->

  <div class="logo-div">

    <div class="logo">
      <img src="image/logo.jpg">
    </div>

    <div class="nav">
     <ul>
       <li>nav-button</li>
     </ul>
    </div><!-- .nav -->

  </div><!--logo div -->

</div><!-- .wrapper -->

这里真正的问题是,您将使用什么方法来循环内容?您可以复制他的方法,或者如果您想要更改的只是背景而不是任何内容,则只需更改背景位置。

.wrapper 或父元素需要 position:relative; 该包装器的内容,在本例中为 .logo-div 和 .rotator 需要 position:relative 位于导航栏和徽标后面的 .rotator div 以及所有需要 z-index:1 的内容;加上顶部:0;并离开:0;例如 .rotator div 上方的 .logo-div 需要 z-index:2 或 9999;加上顶部:0;并离开:0;举个例子

所以现在一切都停留在应有的位置,并且 .rotator 的内容可以移动而不会弄乱页面的其余部分。

选择一种循环/移动背景内容/图像的方法,我会给你一个更具体的答案。

希望这可以帮助

于 2012-02-07T01:09:11.553 回答