/* 整体容器样式 */ .timeline { position: relative; max-width: 1200px; margin: 0 auto; } /* 时间轴线条样式 */ .timeline::after { content: ""; position: absolute; width: 6px; background-color: #ccc; top: 0; bottom: 0; left: 50%; margin-left: -3px; } /* 时间轴卡片容器样式 */ .container { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; } /* 将左边的卡片放置在时间轴左边 */ .left { left: 0; } /* 将右边的卡片放置在时间轴右边 */ .right { left: 50%; } /* 时间轴卡片内容样式 */ .content { padding: 20px 30px; background-color: #f9f9f9; position: relative; border-radius: 6px; } /* 时间轴卡片上的圆形标记样式 */ .container::before { content: ""; position: absolute; width: 20px; height: 20px; background-color: #ccc; border-radius: 50%; top: 15px; z-index: 1; } /* 左边卡片的圆形标记位置调整 */ .left::before { right: -10px; } /* 右边卡片的圆形标记位置调整 */ .right::before { left: -10px; } /* 时间轴卡片上的箭头样式 */ .right-arrow { height: 0; width: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #ccc; position: absolute; top: 15px; right: -10px; } .left-arrow { height: 0; width: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #ccc; position: absolute; top: 15px; left: -10px; } /* 卡片标题样式 */ h2 { margin-top: 0; } /* 响应式设计，当屏幕宽度小于 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: 4px solid #ccc; border-radius: 50%; height: 16px; width: 16px; top: 20px; } .right { left: 0%; } .left-arrow, .right-arrow { border: none; height: 0; width: 0; top: 20px; } .left-arrow { border-right: 10px solid #ccc; left: 50px; } .right-arrow { border-left: 10px solid #ccc; right: auto; left: 50px; } }