使用tour对网站进行分步引导–业余草_html/css_WEB-ITnose

如果你细心的话，你就会发现有部分网站在升级或者注册后，会出现分步引导。引导我们如何使用网站。最常见的应该就是支付宝。那么支付宝是如何实现这样的功能的呢？今天我就为大家介绍bootstrap-tour插件来揭开它的面纱。运行效果如下：

代码如下：

   	 	 使用tour对网站进行分步引导 		  	  	 		body{ 			background: #f5faff;		}		.demo_con{			width: 960px;			margin:40px auto 0;		}		.button{			width: 140px;			line-height: 38px;			text-align: center;			font-weight: bold;			color: #fff;			text-shadow:1px 1px 1px #333;			border-radius: 5px;			margin:0 20px 20px 0;			position: relative;			overflow: hidden;		}		.button:nth-child(5n){			margin-right: 0;		}		.button.gray{			color: #8c96a0;			text-shadow:1px 1px 1px #fff;			border:1px solid #dce1e6;			box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;			background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);			background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);			background: linear-gradient(top,#f2f3f7,#e4e8ec);		}		.button.black{			border:1px solid #333;			box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;			background: -webkit-linear-gradient(top,#656565,#4c4c4c);			background: -moz-linear-gradient(top,#656565,#4a4a4a);			background: linear-gradient(top,#656565,#4a4a4a);		}		.button.red{			border:1px solid #b42323;			box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;			background: -webkit-linear-gradient(top,#d53939,#b92929);			background: -moz-linear-gradient(top,#d53939,#b92929);			background: linear-gradient(top,#d53939,#b92929);		}		.button.yellow{			border:1px solid #d2a000;			box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;			background: -webkit-linear-gradient(top,#fece34,#d8a605);			background: -moz-linear-gradient(top,#fece34,#d8a605);			background: linear-gradient(top,#fece34,#d8a605);		}		.button.green{			border:1px solid #64c878;			box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;			background: -webkit-linear-gradient(top,#90dfa2,#84d494);			background: -moz-linear-gradient(top,#90dfa2,#84d494);			background: linear-gradient(top,#90dfa2,#84d494);		}		.button.blue{			border:1px solid #1e7db9;			box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset;			background: -webkit-linear-gradient(top,#42a4e0,#2e88c0);			background: -moz-linear-gradient(top,#42a4e0,#2e88c0);			background: linear-gradient(top,#42a4e0,#2e88c0);		}	   	
		 			
			 				 第1步 				 第2步 				 第3步 				 第4步 				 第5步 				 第6步 			 				 第7步 				 第8步 				 第9步 				 第10步 				 第11步 				 第12步 			 				 第13步 				 第14步 				 第15步 				 第16步 				 第17步 				 第18步 			 				 第19步 				 第20步 				 第21步 				 第22步 				 第23步 				 第24步 				 第25步

      
查看更多关于使用tour对网站进行分步引导–业余草_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did114336