你的位置:首页 > 网页设计

[网页设计]spectre.css知识点(一)时间轴的实现

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)效果图