如何 - 時間軸
學習如何使用 CSS 建立響應式“時間軸”。
時間軸
2017
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
2016
Lorem ipsum dolor sit amet, quo ei simul congue exerci.
2015
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto perfecto perfecti perfect!
如何建立時間軸
步驟 1) 新增 HTML
示例
<div class="timeline">
<div class="container left">
<div class="content">
<h2>2017</h2>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2016</h2>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
步驟 2) 新增 CSS
示例
* {
box-sizing: border-box;
}
/* 設定背景色 */
body {
background-color: #474e5d;
font-family: Helvetica, sans-serif;
}
/* 實際的時間軸（垂直標尺） */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* 實際的時間軸（垂直標尺） */
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* 內容容器 */
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* 時間軸上的圓圈 */
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* 將容器放在左側 */
.left {
left: 0;
}
/* 將容器放在右側 */
.right {
left: 50%;
}
/* 為左側容器新增箭頭（指向右側） */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* 為右側容器新增箭頭（指向左側） */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* 修正右側容器的圓圈 */
.right::after {
left: -16px;
}
/* 實際內容 */
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
/* 媒體查詢 - 螢幕寬度小於 600px 時的響應式時間軸 */
@media screen and (max-width: 600px) {
/* 將時間軸放在左側 */
.timeline::after {
left: 31px;
}
/* 全寬容器 */
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* 確保所有箭頭都指向左側 */
.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* 確保所有圓圈都在同一位置 */
.left::after, .right::after {
left: 15px;
}
/* 使所有右側容器表現得像左側容器一樣 */
.right {
left: 0%;
}
}
自己動手試一試 »
