製作的HTML/CSS

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

想象一下這樣的層次結構和級別在你的代碼（我有與你的子類沒有任何關係，比如singlehold，twohold，...這些實際上是好的恕我直言。）：

時間軸（全體）>不同塊（你的「整體」子集，像你.onehold，...）>在積木

段和鏈接（假設你的整個時間表不在固定容器像960像素，這樣它可以收縮或擴大您的網頁）

第一級別：您的整個時間表，它會有width類似90%的頁面。金額並不重要，只是百分比寬度。

第二級：如果你有一定數量的塊，用你最喜歡的計算器做一個數學運算來確定每個塊的寬度。 （如果你有4塊，那麼每塊應該是25%） 如果不是，我認爲你必須使用一些JavaScript魔術，並讓它隨着你的塊數隨着時間增長而計算寬度。

第三級別：你的鏈接，這將在你的各個班級有所不同，取決於他們將擁有多少鏈接。然後，根據該特定數字，您指定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;} 


}