你的位置:首页 > 软件开发 > 网页设计 > spectre.css知识点(一)时间轴的实现

spectre.css知识点(一)时间轴的实现

发布时间:2017-08-29 16:00:21
spectre.css是一个轻量级的css框架,只要使用过bootstrap,那么这个使用起来就不是问题,不过现在网络上的文档大都是英文,而且写的比较概括,所以查阅起来不是很方便,今天是我第一天学习这个框架,把所学到的知识点记录下来。使用步骤:1.引用方法下载spectre.cs ...

spectre.css是一个轻量级的css框架,只要使用过bootstrap,那么这个使用起来就不是问题,不过现在网络上的文档大都是英文,而且写的比较概括,所以查阅起来不是很方便,今天是我第一天学习这个框架,把所学到的知识点记录下来。

使用步骤:

1.引用方法

下载spectre.css,地址:https://github.com/picturepan2/spectre/releases,然后解压,将里面的dist的css文件引入到你创建的项目中,如下图所示:

 

spectre.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知识点(一)时间轴的实现

 

原标题:spectre.css知识点(一)时间轴的实现

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。