样式"/>
CSS时间线样式
css实现时间线样式，效果如下图：
一、CSS代码
.timeline {padding-left: 5px} .timeline-item { position: relative;padding-bottom: 20px;} .timeline-axis {position: absolute;left: -5px;top: 0;z-index: 10;width: 20px;height: 20px;line-height: 20px;background-color: #fff;color: #16b777;border-radius: 50%;text-align: center;cursor: pointer;} .timeline-axis:hover {color: #ff5722} .timeline-item:before {content: "";position: absolute;left: 5px;top: 0;z-index: 0;width: 1px;height: 100%;background: #16b777;} .timeline-item:first-child:before {display: block;} .timeline-item:last-child:before {display: none;} .timeline-content {padding-left: 25px;} .timeline-title {position: relative;margin-bottom: 10px;line-height: 22px}.roundness{background-color: #16b777;}
二、html代码
<div class="mythBox mid timeline"><div class="timeline-item"><i class="timeline-axis roundness"></i><div class="timeline-content text"><div class="timeline-title">2005年大学毕业</div></div></div><div class="timeline-item"><i class="timeline-axis roundness"></i><div class="timeline-content text"><div class="timeline-title">2005年大学毕业</div></div></div><div class="timeline-item"><i class="timeline-axis roundness"></i><div class="timeline-content text"><div class="timeline-title">2005年大学毕业</div></div></div></div>
三、完整代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1" /><style>.timeline {padding-left: 5px} .timeline-item { position: relative;padding-bottom: 20px;} .timeline-axis {position: absolute;left: -5px;top: 0;z-index: 10;width: 20px;height: 20px;line-height: 20px;background-color: #fff;color: #16b777;border-radius: 50%;text-align: center;cursor: pointer;} .timeline-axis:hover {color: #ff5722} .timeline-item:before {content: "";position: absolute;left: 5px;top: 0;z-index: 0;width: 1px;height: 100%;background: #16b777;} .timeline-item:first-child:before {display: block;} .timeline-item:last-child:before {display: none;} .timeline-content {padding-left: 25px;} .timeline-title {position: relative;margin-bottom: 10px;line-height: 22px}.roundness{background-color: #16b777;}</style></head><body><div class="mythBox mid timeline"><div class="timeline-item"><i class="timeline-axis roundness"></i><div class="timeline-content text"><div class="timeline-title">2005年大学毕业</div></div></div><div class="timeline-item"><i class="timeline-axis roundness"></i><div class="timeline-content text"><div class="timeline-title">2005年大学毕业</div></div></div><div class="timeline-item"><i class="timeline-axis roundness"></i><div class="timeline-content text"><div class="timeline-title">2005年大学毕业</div></div></div></div></body>
</html>
ok，完工。
更多推荐
CSS时间线样式
发布评论