首页 > > 网页制作 > css >

spectre.css知识点（一）时间轴的实现

2018-06-24 01:48:17来源：未知阅读 ()

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