HTML橫向時間軸是一種常見的網頁設計元素，它有助于展示時間序列事件。以下是一個基本的HTML橫向時間軸代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>橫向時間軸</title>
<style>
/* 樣式 */
ul.timeline {
list-style-type: none;
position: relative;
padding-left: 1.5em;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 0;
height: 100%;
width: 1px;
top: 0;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background-color: #fff;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #22c0e8;;
left: 10px;
width: 20px;
height: 20px;
z-index: 100;
box-shadow: 0 0 0 4px #fff;
}
ul.timeline > li:after {
content: ' ';
display: inline-block;
position: absolute;
top: 25px;
left: 0;
bottom: 0;
width: 100%;
z-index: 0;
background: #022c46;
box-shadow: 0 0 0 4px #d4d9df;
}
.timeline-content {
padding: 20px;
background-color: #1d242c;
position: relative;
border-radius: 6px;
box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.2);
}
.timeline-content h2 {
color: #fff;
margin-top: 0;
}
.timeline-content p {
color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<h1>橫向時間軸</h1>
<ul class="timeline">
<li>
<div class="timeline-content">
<h2>時光荏苒</h2>
<p>這是一段時間軸的描述信息。</p>
</div>
</li>
<li>
<div class="timeline-content">
<h2>分秒不停</h2>
<p>這是一段時間軸的描述信息。</p>
</div>
</li>
<li>
<div class="timeline-content">
<h2>歲月靜好</h2>
<p>這是一段時間軸的描述信息。</p>
</div>
</li>
</ul>
</div>
</body>
</html>代碼注釋解釋：
- <ul class="timeline">: 創建一個包含列表元素的容器作為時間軸的框架。
- <li>: 列表元素，代表一個時間事件。
- <div class="timeline-content">: 列表元素的內容，并用來包含事件的詳細信息。
- <h2>: 時間事件的標題。
- <p>: 時間事件的描述。
總體來說，你可以根據自己的需要更改時間軸的樣式、添加、刪除事件等,不過代碼中的樣式已經能滿足基本需求。