spectre.css知识点(一)时间轴的实现
spectre.css是一个轻量级的css框架,只要使用过bootstrap,那么这个使用起来就不是问题,不过现在网络上的文档大都是英文,而且写的比较概括,所以查阅起来不是很方便,今天是我第一天学习这个框架,把所学到的知识点记录下来。
使用步骤:
1.引用方法
下载spectre.css,地址:https://github.com/picturepan2/spectre/releases,然后解压,将里面的dist的css文件引入到你创建的项目中,如下图所示:
2.使用方法
html标签里面,加入类名:<div class="timeline"></div>
3.时间线
(1)源代码
<div class="wrap" style="width: 400px;margin: 0 auto;"> <div class="timeline"> <div class="timeline-item" id="timeline-example-1"> <div class="timeline-left icon-lg"> <a class="timeline-icon tooltip" data-tooltip="2016年三月" href="#timeline-example-1"></a> </div> <div class="timeline-content"> <div class="tile"> <div class="tile-content"> <p class="tile-subtitle">2016年3月</p> <p class="tile-title">初始提交</p> </div> </div> </div> </div> <div class="timeline-item" id="timeline-example-2"> <div class="timeline-left"> <a class="timeline-icon icon-lg tooltip" href="#timeline-example-2" data-tooltip="2017年2月"> <i class="icon icon-check"></i> </a> </div> <div class="timeline-content"> <div class="tile"> <div class="tile-content"> <p class="tile-subtitle">2017年2月</p> <p class="tile-title">新文件经验</p> <p class="tile-title"><a href="">条形码</a>:表示任务的进度</p> <p class="tile-title"><a href="">步骤</a>:一系列任务步骤的进度指标</p> <p class="tile-title"><a href="">瓷砖</a>:可重复或可嵌入的信息块</p> </div> <div class="tile-action"> <button class="btn">视图</button> </div> </div> </div> </div> <div class="timeline-item" id="timeline-example-3"> <div class="timeline-left"> <a class="timeline-icon icon-lg tooltip" href="#timeline-example-2" data-tooltip="2017年3月"> <i class="icon icon-check"></i> </a> </div> <div class="timeline-content"> <div class="tile"> <div class="tile-content"> <p class="tile-subtitle">2017年3月</p> <p class="tile-title"><a href="">图标</a>:单元素,响应和纯CSS图标</p> <p class="tile-title"><a href="">Popovers</a>:小重叠内容容器</p> <p class="tile-title"><a href="">日历</a>:日期或日期范围选择器和事件显示</p> <p class="tile-title"><a href="">旋转木马</a>:旋转图像的幻灯片</p> </div> <div class="tile-action"> <button class="btn">视图</button> </div> </div> </div> </div> </div>
</div>
(2)效果图
20岁以后,要尽可能不让自己失望。