0

我需要帮助以使我的导航链接位于我的容器后面。一旦我这样做了，我就可以对我的链接产生跳跃影响并添加图像。我希望它看起来像一个文件夹，当您将鼠标悬停在链接上时，看起来每个链接都会跳转到一个新文件夹。出于某种原因，当我输入代码以使链接跳转时，它会将链接向下推到我的容器中。我需要它在容器下方和后面一点点才能得到那种外观。你能帮忙吗？

BODY {
overflow:hidden;
      margin: 150px; 
      padding: 0; 
      background: url ();
      color: #404040; 
      font: normal 12px arial;}


#header {
      margin:35px auto;
      width: 800px;
      height: auto;
      padding: 10px 0px 0px 0px;
      background: #900}



A.main:link, A.main:active, A.main:visited
       {
       margin-bottom: 0px; 
       padding: 5px 20px 20px 10px;
       margin: 0px 2px 0px 2px;
       background: url('file:///C|/Users/JESS/Desktop/none');
       border:double;
       float:left;
       margin: 25px;}

A.main:hover  
     {color: #303030;
      border: double;
      margin:4px;}

#container {
     margin: 0px auto;
     padding-left:15px;
     width: 800px;
     height: auto;
     background: #000;
     border-style:double;
     box-shadow: 15px 15px 5px #333;
     -moz-box-shadow: 10px 10px 5px #333;
     -webkit-box-shadow: 10px 10px 5px #333;} 

#content {
     float: none;
     width: 800px;
     padding: 0px 0px 100px 0px;
     height: auto;
     text-align: justify;
     overflow: auto;}


<div id="header">
      <center>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      </center>
</div>



<div id="container">



<div id="content">
4

2 回答 2

0

您是否尝试过添加z-index和？position#header#container

#header {
  margin:35px auto;
  width: 800px;
  height: auto;
  padding: 10px 0px 0px 0px;
  background: #900;
  position: relative;
  z-index: -10;
}


#container {
  margin: 0px auto;
  padding-left:15px;
  width: 800px;
  height: auto;
  background: #000;
  border-style:double;
  z-index: 5;
  box-shadow: 15px 15px 5px #333;
  -moz-box-shadow: 10px 10px 5px #333;
  -webkit-box-shadow: 10px 10px 5px #333;
}
于 2012-06-01T00:08:38.643 回答
0

设置z-index需要您设置position- 尽管值可以是相对的、绝对的或固定的。为了让它以我认为你所描述的方式“跳跃”，你可以弄乱边距，如下所示：

A.main:link, A.main:active, A.main:visited {
       z-index: 5;
       position: relative;
       margin-bottom: 0px;
       padding: 50px;
       padding-top: 0px;
       border:double;
       float:left;
       margin: 10px;}

A.main:hover {
      color: #303030;
      border: double;
      margin:10px;
      margin-top:0px;
      margin-bottom:20px;}

#container {
     margin: 0px auto;
     padding-left:15px;
     width: 800px;
     height: auto;
     background: #000;
     border-style:double;
     position:relative;
     box-shadow: 15px 15px 5px #333;
     -moz-box-shadow: 10px 10px 5px #333;
     -webkit-box-shadow: 10px 10px 5px #333;}
于 2012-06-01T00:46:24.330 回答