Question

我想做这样的导航：

我怎样才能使这个响应？

这是我目前的代码，但我认为它没有响应：

HTML

<figure class="pagenation"> 
        <a href="#1" data-liquidslider-ref="main-slider" class="colone">adddddddd</a>
        <a href="#2" data-liquidslider-ref="main-slider" class="coltwo">adddddddd</a>
        <a href="#3" data-liquidslider-ref="main-slider" class="colthree">adddddddd</a>

      </figure>

CSS

#one {position:absolute;top:200px;background-image: url('imgact/a1.png');}
#one:hover {background-image: url('imgact/a1-over.png');}
.onehold {background-position: left bottom;
background-repeat: no-repeat;
width: 725px;height:130px;z-index: 4}

#two {position:absolute;top:238px;background-image: url('imgact/a2.png');}
#two:hover {background-image: url('imgact/a2-over.png');}
.twohold {background-position: left bottom;
background-repeat: no-repeat;
width: 725px;height:171px;z-index: 3}

#three {position:absolute;top:325px;background-image: url('imgact/3.png');display:inline-block;text-indent: 9999999px}
#three:hover {background-image: url('imgact/3over.png');}
.threehold {background-position: left bottom;
background-repeat: no-repeat;
width: 725px;height:171px;z-index: 2;}


#four {position:absolute;top:432px;background-image: url('imgact/4.png');}
#four:hover {background-image: url('imgact/4over.png');}
.fourhold {background-position: left bottom;
background-repeat: no-repeat;
width: 725px;height:171px;z-index: 1}

Answer 1

想象一下你的代码中的这个层次结构和级别（我与你的子类无关，如onehold，twohold，......那些实际上是好的恕我直言。）：

时间表（整个）＆gt;不同的块（你的“整体”的子集，就像你的.onehold，...）＆gt;您的街区中的部分和链接

（假设您的整个时间轴不在像960px这样的固定容器中，以便它可以缩小或扩展到您的网页中）

第1级：您的整个时间轴，它会与您的网页width 90%相似。数量并不重要，只是百分比宽度。

第二级：如果您有一定数量的块，请使用您喜欢的计算器进行数学计算，以确定每个块的宽度。（如果你有4个区块，则每个区块应为25%）如果没有，我认为你必须使用一些JavaScript魔法，让它随着时间的推移随着你的数量增长而计算宽度。

第3级：您的链接，根据他们将保留多少链接，您的各个班级会有所不同。然后，根据该特定数字，您指定margin s的百分比。

我认为这将解决您的问题并失去px;）

Answer 2

感谢您的回答我解决了问题“％”我的代码

.pagenation {position:absolute;float:left;margin-left:100px;margin-top: 0px;text-indent: -9999px;display: inline-block;background-image: url('ruler.png');background-size:100%;width:525px;text-align: left}
        .pagenation a{ text-align: left}

        .colone {width: 20%;top:8px;left:1px;height: 10px;background-color: black !important;display: block; zoom: 1; filter: alpha(opacity = 0); /* For IE */
  opacity: 0.0;position: relative;}
        .colone:hover {float:left;display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .colone:active {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .colone:visited {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .coltwo {width: 240px;top:-3px;left:199px;height: 10px;background-color: black !important;display: block; zoom: 1; filter: alpha(opacity = 0); /* For IE */
  opacity: 0.0;position: relative;}
        .coltwo:hover {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .coltwo:active {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .coltwo:visited {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .colthree {width:74px;top:-12px;left:450px;height: 10px;background-color: black !important;display: block; zoom: 1; filter: alpha(opacity = 0); /* For IE */
  opacity: 0.0;position: relative;}
        .colthree:hover {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .colthree:active {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
        .colthree:visited {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}


  /* Large desktop */
@media (min-width: 1200px) { 




 }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 



 }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 

    .thumbcontainer {margin-top: 150px;width: 100%;margin-left: 10%}  
    .pagenation {background-size: 100%;width:67%;height:30px;margin-left: 30px}
    .colone {width: 20%;top:8px;left:1px;height: 10px;background-color: black !important;display: block; zoom: 1; filter: alpha(opacity = 0); /* For IE */
  opacity: 0.0;position: relative;}
      .colone:hover {float:left;display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .colone:active {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .colone:visited {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .coltwo {width: 20%;top:-3px;left:199px;height: 10px;background-color: black !important;display: block; zoom: 1; filter: alpha(opacity = 0); /* For IE */
  opacity: 0.0;position: relative;}
      .coltwo:hover {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .coltwo:active {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .coltwo:visited {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .colthree {width:20%;top:-12px;left:450px;height: 10px;background-color: black !important;display: block; zoom: 1; filter: alpha(opacity = 0); /* For IE */
  opacity: 0.0;position: relative;}
      .colthree:hover {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .colthree:active {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}
      .colthree:visited {display: block;background-color: black; zoom: 1; filter: alpha(opacity = 100); /* For IE */
  opacity: 1.0;}


 }

在html / CSS中创建响应时间轴

2 个答案: