操作指南 - 时间轴
了解如何使用 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%;
}
}
亲自尝试 »
