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

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

新老客户大回馈,云服务器低至5折

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:使用webpack热加载,开发多页面web应用

下一篇:HTML 回顾整理