要使用HTML和CSS構(gòu)建時(shí)間軸佈局，請(qǐng)從語(yǔ)義HTML結(jié)構(gòu)開(kāi)始，添加垂直線和點(diǎn)的視覺(jué)流程，為每個(gè)項(xiàng)目造型以供可讀性，應(yīng)用響應(yīng)性調(diào)整，並確保跨設(shè)備兼容性。首先創(chuàng)建一個(gè)具有多個(gè)時(shí)間軸項(xiàng)的容器Div，每個(gè)DIV都包含一個(gè)日期和內(nèi)容部分。使用CSS定位為事件創(chuàng)建中央垂直線和圓形標(biāo)記。樣式日期和內(nèi)容帶有字體和間距，可選地使用nth-Child選擇器替代項(xiàng)目側(cè)面。通過(guò)調(diào)整媒體查詢中的填充，邊距和字體大小來(lái)優(yōu)化移動(dòng)設(shè)備，以確保佈局在所有設(shè)備上保持清潔和功能。

時(shí)間軸佈局是按時(shí)間順序表達(dá)事件，任務(wù)或過(guò)程的干淨(jìng)和視覺(jué)方式。無(wú)論您是構(gòu)建項(xiàng)目路線圖，歷史程序頁(yè)面還是個(gè)人投資組合時(shí)間表，僅使用HTML和CSS都可以很好地完成工作 - 不需要JavaScript。

這是使用CSS構(gòu)建簡(jiǎn)單而靈活的時(shí)間軸佈局的方法。

基本結(jié)構(gòu)：使用語(yǔ)義HTML

從時(shí)間軸的容器開(kāi)始，然後在其中添加項(xiàng)目。每個(gè)項(xiàng)目代表時(shí)間軸上的一個(gè)點(diǎn)。

 <div class =“時(shí)間軸”>
  <div class =“時(shí)間表 - 項(xiàng)目”>
    <div class =“時(shí)間軸日期”> 2021 </div>
    <div class =“時(shí)間軸 - 符合”>
      <h3>開(kāi)始學(xué)習(xí)Web開(kāi)發(fā)</H3>
      <p>學(xué)習(xí)的HTML，CSS和基本JavaScript。 </p>
    </div>
  </div>

  <div class =“時(shí)間表 - 項(xiàng)目”>
    <div class =“時(shí)間軸日期”> 2022 </div>
    <div class =“時(shí)間軸 - 符合”>
      <h3>構(gòu)建了第一個(gè)真實(shí)項(xiàng)目</h3>
      <p>使用靜態(tài)HTML和CSS的響應(yīng)式博客。 </p>
    </div>
  </div>
</div>

這為我們提供了清晰的樣式結(jié)構(gòu)。 .timeline保留所有項(xiàng)目，每個(gè)項(xiàng)目都有一個(gè)日期和內(nèi)容部分。

垂直線和點(diǎn)：添加視覺(jué)流

時(shí)間軸通常具有指示每個(gè)事件的標(biāo)記（點(diǎn)或圖標(biāo)）的中央垂直線。

使用CSS定位來(lái)放置線路和標(biāo)記：

 .timeline {
  位置：相對(duì)；
  左填充：20px;
}

.timeline :: {
  內(nèi)容： '';
  位置：絕對(duì)；
  左：5px;
  頂部：0;
  底部：0;
  寬度：2px;
  背景色：#ccc;
}

.timeline-item {
  邊緣底：30px;
  位置：相對(duì)；
}

.timeline-item :: after {
  內(nèi)容： '';
  位置：絕對(duì)；
  左：3px;
  頂部：10px;
  寬度：10px;
  身高：10px;
  背景色：白色；
  邊界：2PX實(shí)心＃333;
  邊界拉迪烏斯：50％；
}

現(xiàn)在，您有一條垂直線從左側(cè)延伸，標(biāo)記每個(gè)事件的小圓圈。這可以幫助用戶視覺(jué)遵循序列。

造型每個(gè)項(xiàng)目：使其可讀且吸引人

每個(gè)項(xiàng)目都應(yīng)該易於掃描。您可以將日期與內(nèi)容分開(kāi)，並應(yīng)用光間距和顏色。

 。
  字體重量：大膽；
  顏色：＃555;
  邊緣底：5px;
}

.timeline-content H3 {
  保證金：0 0 5px;
  字體大?。?REM;
}

.timeline-content p {
  保證金：0;
  字體大?。?.9REM；
  顏色：＃444;
}

如果要交替交替（左/右），則可以使用nth-child(odd)和nth-child(even)選擇器來(lái)回移動(dòng)項(xiàng)目。只要記住要相應(yīng)地調(diào)整填充物和邊距即可。

響應(yīng)迅速的調(diào)整：保持移動(dòng)友好

時(shí)間表可能會(huì)在較小的屏幕上局促。一個(gè)很好的解決方法是垂直堆疊所有內(nèi)容，並在移動(dòng)設(shè)備上卸下交替?zhèn)让妗?/p>

 @Media（最大寬度：600px）{
  .timeline {
    左填充：15px;
  }

  .timeline-item {
    邊距底：20px;
  }
}

還要考慮稍微降低字體尺寸，並在需要時(shí)增加觸摸目標(biāo)。

基本上就是這樣。有了一些基本的HTML和幾行CSS，您就可以使用一個(gè)工作的時(shí)間表佈局，看起來(lái)很乾淨(jìng)，並且可以在設(shè)備上運(yùn)行良好。這並不復(fù)雜，但是要獲得間距和對(duì)齊方式，對(duì)其感受的感覺(jué)很大。

以上是CSS教程有關(guān)創(chuàng)建時(shí)間軸佈局的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！