spectre.css是一个轻量级的css框架,只要使用过bootstrap,那么这个使用起来就不是问题,不过现在网络上的文档大都是英文,而且写的比较概括,所以查阅起来不是很方便,今天是我第一天学习这个框架,把所学到的知识点记录下来。使用步骤:1.引用方法下载spectre.cs ...
spectre.css是一个轻量级的css框架,只要使用过bootstrap,那么这个使用起来就不是问题,不过现在网络上的文档大都是英文,而且写的比较概括,所以查阅起来不是很方便,今天是我第一天学习这个框架,把所学到的知识点记录下来。
使用步骤:
1.引用方法
下载spectre.css,地址:https://github.com/picturepan2/spectre/releases,然后解压,将里面的dist的css文件引入到你创建的项目中,如下图所示:
2.使用方法
html标签里面,加入类名:<div ></div>
3.时间线
(1)源代码
<div > <div > <div id="timeline-example-1"> <div > <a data-tooltip="2016年三月" href="#timeline-example-1"></a> </div> <div > <div > <div > <p >2016年3月</p> <p >初始提交</p> </div> </div> </div> </div> <div id="timeline-example-2"> <div > <a href="#timeline-example-2" data-tooltip="2017年2月"> <i ></i> </a> </div> <div > <div > <div > <p >2017年2月</p> <p >新文件经验</p> <p ><a href="">条形码</a>:表示任务的进度</p> <p ><a href="">步骤</a>:一系列任务步骤的进度指标</p> <p ><a href="">瓷砖</a>:可重复或可嵌入的信息块</p> </div> <div > <button >视图</button> </div> </div> </div> </div> <div id="timeline-example-3"> <div > <a href="#timeline-example-2" data-tooltip="2017年3月"> <i ></i> </a> </div> <div > <div > <div > <p >2017年3月</p> <p ><a href="">图标</a>:单元素,响应和纯CSS图标</p> <p ><a href="">Popovers</a>:小重叠内容容器</p> <p ><a href="">日历</a>:日期或日期范围选择器和事件显示</p> <p ><a href="">旋转木马</a>:旋转图像的幻灯片</p> </div> <div > <button >视图</button> </div> </div> </div> </div> </div>
</div>
(2)效果图
原标题:spectre.css知识点(一)时间轴的实现
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。